容器与子元素的高度不同
[英]Container is not the same height as the child elements
问题描述
容器仅约为屏幕高度的3/4，与子元素的高度不同。
这是为什么？
我试图给容器和主体一个min-height: 100%但这不起作用。 即使!important
我不使用引导程序，仅使用纯HTML和CSS。
任何帮助，不胜感激！
编辑：更改正文或html高度不起作用。 这会中断页面。
我有一个带有以下CSS的主体：
body {
background-image: url("../img/1.png");
background-repeat: repeat;
background-size: cover;
font-family: "Raleway", sans-serif;
font-size: 20px;
font-weight: 300;
}
容器具有以下CSS规则：
.container {
width: 900px !important;
margin: auto;
padding-left: 20px;
padding-right: 20px;
background-color: rgba(255, 255, 255, 0.3);
height: 100% !important;
}
我的标记如下所示：
<body>
<div class="container">
<div class="header">
<div class="lang">
<ul class="languages">
<li>DE</li>
<li>FR</li>
</ul>
</div>
<img src="img/header/royalpool.png" alt="" class="logo-royal"/>
<img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
<div class="lang">
<ul class="languages">
<li>Kontakt</li>
<li>Downloads</li>
<li>Händler</li>
</ul>
</div>
<ul class="navi">
<li>
<div class="box-q-1"><img src="img/header/i/pool.png" alt="" class=header-img/>
<p>Pool</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/filter.png" alt="" class=header-img/>
<p>Filteration</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/des.png" alt="" class=header-img/>
<p>Desinfection</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/cover.png" alt="" class=header-img/>
<p>Cover</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/solar.png" alt="" class=header-img/>
<p>Solar</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/pumpe.png" alt="" class=header-img/>
<p>Wärme-Pumpe</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/led.png" alt="" class=header-img/>
<p>LED</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/clean.png" alt="" class=header-img/>
<p>Clean</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/terasse.png" alt="" class=header-img/>
<p>Terasse</p>
</div>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="box-title">
<p>Element-Betonbecken Premium</p>
</div>
<img src="img/page1/pool-top.png" class="pool-img" alt=""/>
<div class="box-small-title-right">
<p>Elementtreppen</p>
</div>
<div class="box-elementtreppen">
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Ecktreppe</p>
</div>
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Innen Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/ganz.png" alt="Eck" class="treppen-img"/>
<p>Ganze Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/rom.png" alt="Eck" class="treppen-img"/>
<p>Römische Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/gerade.png" alt="Eck" class="treppen-img"/>
<p>Gerade Treppe</p>
</div>
</div>
<div class="box-small-title-left">
<p>Varianten Wasserstand</p>
</div>
<img src="img/page1/normal.png" alt="" class="img-wasserstand first"/>
<div class="box-small-title-right">
<p>Bauphasen</p>
</div>
<div class="box-bauphasen"></div>
</div>
</body>
6 个解决方案
解决方案1
8 已采纳 2016-03-17 12:54:13
body包含浮动元素，需要清除它们：
.container::before, .container::after {
content: '';
display: table;
}
.container::after {
clear: both;
}
有关了解浮动的更多信息，请访问： https ： //css-tricks.com/all-about-floats/
解决方案2
1 2016-03-17 10:58:17
解决方案3
0 2016-03-17 10:58:08
如果不必支持旧的浏览器（IE8或更低版本），则可以通过视口单位实现所需的高度设置：
.container {
height: 100vh;
}
在此处检查兼容性： http : //caniuse.com/#search=vh
注意：如果对此有任何疑问，还必须寻找background-size：cover规则的兼容性...
解决方案4
0 2016-03-17 11:01:58
尝试
html,body{ height:100%; margin:0; }
解决方案5
0 2016-03-17 11:03:37
您还应该在html和body上重新设置边距和填充。
html, body {
height: 100%;
padding: 0;
margin: 0;
}
希望能做到。
解决方案6
0 2016-03-17 11:13:51
试试这个可能会起作用：
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
.container {
height: 100%;
}
没有 Flex 的子容器和父容器之间的高度相同
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.