Question

尝试垂直堆叠3个DIV，使得顶部DIV为屏幕高度的25％，中间为50％，底部为25％，但它们似乎扩展了屏幕，我最终得到了一个滚动条。

body,html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#top {
	width: 100%;
	height: 25%;
	background: #464646;
}

#middle {
	width: 100%;
	padding: 15px 0 15px 0;
	margin: 0 auto 0 auto;
	min-width: 657px;
	height: 50%;
	text-align: center;
	vertical-align:middle;
}

#bottom {
	width: 100%;
	padding: 15px 0 15px 0;
	height: 25%;
	background: #988056;
}

<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>

Answer 1

正如Hashem在上面的评论中提到的那样，box-sizing: border-box现在被认为是最好的做法。将以下内容添加到CSS中，您应该好好去：

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Here对您来说是一个很好的阅读。

也就是说，如果您正在处理现有产品并且有许多遗留代码如果您这样做会被破坏，那么您需要解决网站部分的边距和填充，它们会增加高度，这会使这一切加起来超过100％。

如果您对此感到不舒服，请查看flex-box布局。仅适用于现代浏览器，因此如果您需要旧的IE支持，请不要这样做。

Answer 2

这是由于您添加到中间和底部 div的填充。

width和height样式始终指定文本区域的宽度/高度，即“div的内容”的宽度/高度，并且它们 NOT < / strong>包含padding值。填充是额外空间，除了宽度/高度之外还添加。

尝试以下操作，它应该能够提供所需的结果：

<强> HTML：

<div id="top"></div> <div id="middle"><img src="logo.png"></div> <div id="bottom"></div>

<强> CSS：

body,html { height: 100%; width: 100%; margin: 0; padding: 0; } #top { width: 100%; height: 25%; background: #464646; } #middle { width: 100%; margin: 0 auto 0 auto; min-width: 657px; height: 50%; text-align: center; vertical-align:middle; } #bottom { width: 100%; height: 25%; background: #988056; }

工作LIVE。

Answer 3

CSS flexbox layout模块专门用于处理这样的要求。

您可以使用flex-grow属性：

flex-grow属性是Flexible Box Layout模块的子属性。

IT定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它决定了该项目应占用的Flex容器内可用空间的大小。

例如，如果所有项目的flex-grow设置为1，则每个子项将在容器内设置为相同的大小。如果你给一个孩子一个2的值，那个孩子占用的空间是其他孩子的两倍。

*{
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
}
#container{
  -webkit-display:flex;
  -moz-display:flex;
  -ms-display:flex;
  display:flex;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  height:100%;
}
#top {
  -webkit-flex:1;
  -moz-flex:1;
  -ms-flex:1;
  flex:1;
	background: #464646;
}

#middle {
  -webkit-flex:2;
  -moz-flex:2;
  -ms-flex:2;
  flex:2;
  background:dodgerblue;
}

#bottom {
  -webkit-flex:1;
  -moz-flex:1;
  -ms-flex:1;
  flex:1;
	background: #988056;
}

<div id="container">
  	<div id="top"></div>
	<div id="middle"></div>
	<div id="bottom"></div>
</div>

Answer 4

在这种情况下，由于您担心屏幕高度，因此您可能需要调查'vh'css规则。

例如，如果你想均匀地堆叠你的顶部，中间和底部，你可以使用纯css：

#top, #bottom, #middle {
    height: 32vh;
}

或者，与问题有关：

#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height 24vh; } /*24 vh so you have a little wiggle room*/

在这里检查：

body { margin : 0; padding: 0}
div { border: #ccc solid 1px; }
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height: 24vh; } 
/*24 vh so you have a little wiggle room*/

    <div id="top">top</div>
    <div id="middle">middle</div>
    <div id="bottom">bottom</div>

3堆叠DIV以适应屏幕高度？

4 个答案: