html - 包装高度不响应网格行内容
问题描述
我将尝试提供尽可能多的细节，我尝试了一切，在搜索这些论坛时似乎没有任何东西可以回答我的问题。
我有一个网格布局和一个用于网格布局之外的内容的包装器，它包装了除页眉和页脚之外的所有内容。
但是，当我将内容添加到垂直扩展的行中时，包装器的高度似乎是静态的，它会导致网格溢出并覆盖页脚并移动它。
我尝试使用网格高度、包装器高度、显示、视口高度，但无济于事。我试图将网格保留在包装器内，并将页眉和页脚留在顶部和底部，这样当我向下滚动时，它看起来就像一个单页网站。
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* reset the browser to remove any wierd spacing & remove decoration on all links */
body{
}
/* body tag can be used to add image background or color */
h3 {
text-align: center;
}
li {
display: inline;
}
li a {
padding: 14px 16px;
text-align: center;
}
.wrapper {
margin: 0 auto;
width: 90%;
border: 1px solid grey;
}
/* wrapper that content inside is lined up on the left and right side of the website values go clockwise from top */
.content {
display: grid;
height: 100vh;
grid-gap: 10px;
grid-template-columns: repeat(minmax(5%, min-content) 234px 234px 234px minmax(5%, min-content));
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
". headline socialmedia sidebar ."
". portfolio portfolio sidebar ."
". about about sidebar ."
". resume resume sidebar .";
}
/* adding display grid turns the immediate children of the parent div become grid items */
/* display grid will define the grid, 1fr will create 1 column */
/* the . in the template areas also create a wrapper effect with white space */
.content div:nth-child(even) {
background-color: gold;
}
.content div:nth-child(odd) {
background-color: grey;
}
#header {
grid-area: header;
text-align: center;
padding: 15px;
}
#headline {
grid-area: headline;
text-align: left;
padding: 15px;
}
#socialmedia {
grid-area: socialmedia;
text-align: left;
padding: 15px;
}
#sidebar {
grid-area: sidebar;
text-align: center;
align-content: center;
padding: 15px;
}
#portfolio {
grid-area: portfolio;
text-align: left;
padding: 15px;
}
#about {
grid-area: about;
text-align: left;
padding: 15px;
}
#resume {
grid-area: resume;
text-align: left;
padding: 15px;
}
#footer {
text-align: left;
bottom: 0;
padding: 10px;
}
#footer-left {
width: 30%;
float: left;
padding: 10px;
border: 1px solid grey;
margin-left: 60px;
}
#footer-right {
width: 30%;
float: right;
padding: 10px;
border: 1px solid grey;
margin-right: 60px;
}
/* position footer bottom with bottom 0 */
@media screen and (max-width: 414px) {
/* below this line is code for small screens */
#header {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
}
/* align-items aligns content inside header on same horizontal axis */
/* justify-content creates space between content inside header */
ul {
display: none;
}
img {
float: left;
margin-left: ;
}
svg {
float: right;
}
.wrapper {
width: 414px;
height
border: 1px solid grey;
display: grid;
}
.content {
!important;
display: grid;
grid-gap: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"headline"
"portfolio"
"about"
"resume"
"socialmedia";
}
#footer {
grid-area: footer;
text-align: center;
bottom: 0;
positon: sticky;
}
} <body>
<div id="header">
<img src="Logo1.png" width="100" height="100"><br>
<nav>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">RESUME</a></li>
</ul>
</nav>
</div>
<div class="wrapper">
<div class="content">
<div id="headline"><h3>Headline</h3> </div>
<div id="sidebar"><h3>Sidebar</h3></div>
<div id="socialmedia"><h3>Socialmedia</h3> <br>
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="40" width="40"><title/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0Zm90.526,162.743-53.366,102.3,4,5.744h49.122v73.16H257.469l-8.262,5.352-22.185,42.526a41.5,41.5,0,0,1-7.45,10.153l-.688.688H165.475v-53.41l53.366-102.3-4-5.744H165.717V168.051h88.815l8.262-5.351,22.184-42.527a41.5,41.5,0,0,1,7.451-10.153l.687-.687h53.41Z"/></svg>
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="40" width="40"><title/><path d="M191.32,267.878h-46.3v50.687h46.3a25.344,25.344,0,1,0,0-50.687Z"/><path d="M212.622,212.989A23.924,23.924,0,0,0,188.7,189.064l-.1-.055-.022.055H145.023v47.85H188.7A23.925,23.925,0,0,0,212.622,212.989Z"/><path d="M334.578,240.281a30.557,30.557,0,0,0-30.339,26.928h60.679A30.557,30.557,0,0,0,334.578,240.281Z"/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0ZM203.344,349.528h-94.8V158.1h91.9a48.7,48.7,0,0,1,22.265,92.007,51.6,51.6,0,0,1-19.368,99.42Zm84.3-180.255h92.87v22.8h-92.87ZM400.986,292.137H304.542q-.022.612-.023,1.229a31.517,31.517,0,0,0,58.73,15.9l.064.037h36.85c-9.006,30.666-35.887,44.447-65.2,44.447-38.812,0-67.687-32.007-67.687-71.489s28.875-71.489,67.687-71.489S407.876,244.105,400.986,292.137Z"/></svg>
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="40" width="40"><title/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0ZM183.435,382.667H126.381V203.653h57.054ZM154.908,180.208a32.1,32.1,0,1,1,32.1-32.1A32.1,32.1,0,0,1,154.908,180.208ZM389.2,382.667h-56l0-97.882c0-4.973.785-37.949-27.219-37.949a30.948,30.948,0,0,0-25.681,12.576,39.134,39.134,0,0,0-7.818,23.8v99.451H216.55V203.653h53.216v25.124c12.737-19.541,28.789-26.694,44.578-29.573,28.027-5.11,74.851,11.952,74.851,62.9Z"/></svg>
</div>
<div id="portfolio"><h3>Portfolio</h3></div>
<div id="about"><h3>About</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a congue ligula, quis tempor justo. Maecenas arcu arcu, blandit quis elit et, fringilla fermentum sem. Morbi aliquam gravida rhoncus. Integer et tristique sapien, quis pharetra arcu. Sed vel consequat ex, commodo aliquet metus. Duis justo lectus, feugiat sed est ac, faucibus sollicitudin lacus. Aliquam vehicula diam non arcu malesuada, vel dapibus diam volutpat. Sed vehicula et mi vitae facilisis. Nam gravida est eu massa ultrices, a venenatis lectus consectetur. Sed vestibulum commodo sem sit amet iaculis.</div>
<div id="resume"><h3>Resume</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a congue ligula, quis tempor justo. Maecenas arcu arcu, blandit quis elit et, fringilla fermentum sem. Morbi aliquam gravida rhoncus. Integer et tristique sapien, quis pharetra arcu. Sed vel consequat ex, commodo aliquet metus. Duis justo lectus, feugiat sed est ac, faucibus sollicitudin lacus. Aliquam vehicula diam non arcu malesuada, vel dapibus diam volutpat. Sed vehicula et mi vitae facilisis. Nam gravida est eu massa ultrices, a venenatis lectus consectetur. Sed vestibulum commodo sem sit amet iaculis.</div>
</div>
</div>
<div id="footer">
<div id="footer-left">
<ul>
<li style="display: block;"><a href="#header">header</a>
<li style="display: block;"><a href="#portfolio">portfolio</a>
<li style="display: block;"><a href="#about">about</a>
<li style="display: block;"><a href="#resume">resume</a>
</ul>
</div>
<div id="footer-right">
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="20" width="20"><title/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0Zm90.526,162.743-53.366,102.3,4,5.744h49.122v73.16H257.469l-8.262,5.352-22.185,42.526a41.5,41.5,0,0,1-7.45,10.153l-.688.688H165.475v-53.41l53.366-102.3-4-5.744H165.717V168.051h88.815l8.262-5.351,22.184-42.527a41.5,41.5,0,0,1,7.451-10.153l.687-.687h53.41Z"/></svg>
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="20" width="20"><title/><path d="M191.32,267.878h-46.3v50.687h46.3a25.344,25.344,0,1,0,0-50.687Z"/><path d="M212.622,212.989A23.924,23.924,0,0,0,188.7,189.064l-.1-.055-.022.055H145.023v47.85H188.7A23.925,23.925,0,0,0,212.622,212.989Z"/><path d="M334.578,240.281a30.557,30.557,0,0,0-30.339,26.928h60.679A30.557,30.557,0,0,0,334.578,240.281Z"/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0ZM203.344,349.528h-94.8V158.1h91.9a48.7,48.7,0,0,1,22.265,92.007,51.6,51.6,0,0,1-19.368,99.42Zm84.3-180.255h92.87v22.8h-92.87ZM400.986,292.137H304.542q-.022.612-.023,1.229a31.517,31.517,0,0,0,58.73,15.9l.064.037h36.85c-9.006,30.666-35.887,44.447-65.2,44.447-38.812,0-67.687-32.007-67.687-71.489s28.875-71.489,67.687-71.489S407.876,244.105,400.986,292.137Z"/></svg>
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" height="20" width="20"><title/><path d="M256,0C114.615,0,0,114.615,0,256S114.615,512,256,512,512,397.385,512,256,397.385,0,256,0ZM183.435,382.667H126.381V203.653h57.054ZM154.908,180.208a32.1,32.1,0,1,1,32.1-32.1A32.1,32.1,0,0,1,154.908,180.208ZM389.2,382.667h-56l0-97.882c0-4.973.785-37.949-27.219-37.949a30.948,30.948,0,0,0-25.681,12.576,39.134,39.134,0,0,0-7.818,23.8v99.451H216.55V203.653h53.216v25.124c12.737-19.541,28.789-26.694,44.578-29.573,28.027-5.11,74.851,11.952,74.851,62.9Z"/></svg>
<hr style="width:15%; padding-bottom:10px;">
<!-- hr rule width can cause problems with float if it's too large -->
<p>© All Rights Reserved.</p>
</div>
</div>
</body>解决方案
没关系，我终于让它工作了。我做了一些改变。
我更改为网格布局并添加了 . 到网格区域的每一侧以进行间距（基本上尝试匹配内容网格，因为我尽可能类似地全屏）。
我在包装器中添加了溢出：隐藏，奇怪的是第一次没有工作，可能是因为我的代码搞砸了。
我删除了 HTML 中的一个额外的 /div 标签。
我删除了页脚中的填充（甚至不知道这是否与任何事情有很大关系，它可能没有做任何事情）。
通过添加 display: none 删除了侧边栏。
推荐阅读
- python - 如何将交互式绘图图表保存为 R 中的本地文件？
- vue.js - 在 Prettier 中，如何防止 HTML 结束标记的“>”字符被放置在新行上？
- python - KeyError：0 在 Matplotlib 中绘制标签
- android - 在 Espresso 测试中旋转 Android 模拟器
- java - Java 中的 ECDSA 签名验证性能
- kubernetes - Kuberentes 更新策略等到实际准备好
- xml - PowerShell：找到父节点并编辑子节点
- reactjs - 有没有办法在 React JS 中的按钮 Click 上调用组件？
- java - 将状态信息传递给 HTTP 拦截器的推荐方法是什么？
- javascript - 如何使用 Sequelize 批量更新数组中的元素？