我有以下css：
*{
box-sizing:border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
#container {
width: 100%
height: 100%
}
#div1 {
width: 100%;
height: 20%;
}
#div2 {
width: 100%;
height: 20%;
}
#div3 {
width: 100%;
height: 60%;
}
Html:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
假设我的浏览器分辨率是1280宽768高。容器div的高度是我的视口的100%。3个div的总和也是100%。现在我没有垂直滚动条，因为内容没有超过视口。
如果我在里面添加一些内容，子div会相互推动，因此会显示一个垂直滚动条，因为内容的总高度超过了视口（768px高度）。但子div也覆盖了父div，因为它被设置为浏览器大小的100%。
我需要找到一种方法，将容器保持在视口的100%高度。从逻辑上讲，它应该随视口更改一次大小，因为它是用动态测量设置的，但它没有。容器有768px，但现在，由于内容更大，视口值是另一个（例如：900px高度）。
如果我理解得很清楚，就不要为子div设置任何高度值。一旦内容增长，它们就应该扩展，或者你可以给出一个像min-height这样的条件。我还建议你使用vh，但只针对容器。如果你愿意，你可以设置一个宽度，我认为这不会引起任何麻烦，但请记住，div将自动具有父div的全宽度。
*{
box-sizing:border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
#container {
width: 100%;
height: 100vh;
}
#div1 {
width: 100%;
}
#div2 {
width: 100%;
}
#div3 {
width: 100%;
}
上面的代码将使您的容器达到视口的100%高度，如果您的内容更大，子div将相互推动，容器div将达到新视口的100%高。
视口单元应该可以做到这一点。
CSS:
#div1 {
width: 100%;
height: 20vh;
background: red;
}
#div2 {
width: 100%;
height: 20vh;
background: blue;
}
#div3 {
width: 100%;
height: 60vh;
background: orange;
}
#div4 {
width: 100%;
height: 200px;
background: lime;
}
请参阅Codepen中的工作示例。整体浏览器支持相当不错。
我不确定我是否正确理解了你的问题。
就我所做的而言，您的问题是，您的容器高度是用百分比定义的（以允许它们在不同的屏幕分辨率上正确调整），但是，当您的内容在容器中增长时，它会与下面的容器重叠。
嗯。。。首先，如果你想避免你的内容让你的容器增长，你应该使用overflow：auto，而不是overflow：hidden。当容器的内容占用的空间超过容器时，应该会自动向容器添加滚动条。
请记住，内容比设计更重要，因此，如果您的内容大于您为其保留的空间，默认情况下，浏览器会将您的容器放入所需的空间。
奇怪的是，下面的容器应该被不断增长的容器向下推，而不是被它重叠。这让我觉得可能还有更多的代码干扰了你给我们展示的简单示例？
尝试在div上使用最小高度而不是高度，并删除div上的宽度：
#div1{ min-height: 20% }
#div2{ min-height: 20% }
#div3{ min-height: 60% }
宽度被删除，因为默认情况下div是块元素，块元素将采用全部可用宽度。
块元素也会倾向于向下"推送"内容。在您的示例中，您通过设置width属性限制了这种推送效果，该属性告诉浏览器永远不要将元素增长到屏幕大小的x%以上。
通过设置元素的最小宽度，你基本上是在告诉浏览器，如果有更多的内容，那么就扩大元素以容纳内容。
另一个需要检查的内容是"框大小"属性。当你告诉浏览器在一个元素上使用40%的宽度时，你想在40%中包括该元素的填充和边距吗？如果是：
box-sizing: border-box
编辑以添加flexbox前缀以支持浏览器
flexbox使这一切变得非常简单。
添加任意多的内容，布局就永远不会中断。
* {
margin:0; padding:0;
box-sizing: border-box;
}
html,body {
height: 100%;
min-height: 100%;
}
#container {
height:100%;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
flex-flow: column wrap;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
#div1 {
background: red;
-webkit-flex: 1 0 20%;
-moz-flex: 1 0 20%;
-ms-flex: 1 0 20%;
flex: 1 0 20%;
}
#div2 {
background: blue;
-webkit-flex: 1 0 20%;
-moz-flex: 1 0 20%;
-ms-flex: 1 0 20%;
flex: 1 0 20%;
}
#div3 {
background: orange;
-webkit-flex: 1 0 60%;
-moz-flex: 1 0 60%;
-ms-flex: 1 0 60%;
flex: 1 0 60%;
}<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div><!-- #container --->我试过了，我不确定这是否是你想要的。
$(document).ready(function() {
$("#addText").click(function() {
$(this).parent().append("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a pag")
});
}); html,
body {
height: 100%;
min-height: 100%;
}
#container div {
overflow-y: auto;
position: relative;
}
#container {
width: 100%;
/*min-height: 100%;*/
height: auto;
}
#div1 {
background: green;
width: 100%;
min-height: 20vh;
}
#div2 {
background: blue;
width: 100%;
min-height: 20vh;
}
#div3 {
background: red;
width: 100%;
min-height: 60vh;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="div1">
<button id="addText">Add TEXT</button>
</div>
<div id="div2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
</div>
<div id="div3"></div>
</div>我会使用视口单位。。。不过，您不应该指定高度，否则您的内容可能会超出容器扩展到下一个容器中——请使用最小高度。。。
html, body {
height: 100%;
min-height: 100vh;
}
#container {
width: 100%;
min-height: 100vh;
}
#div1 {
width: 100%;
min-height: 20vh;
background: red;
}
#div2 {
width: 100%;
min-height: 20vh;
background: yellow;
}
#div3 {
width: 100%;
min-height: 60vh;
background: green;
}<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>包含内容的示例：
html, body {
height: 100%;
min-height: 100vh;
}
#container {
width: 100%;
min-height: 100vh;
}
#div1 {
width: 100%;
min-height: 20vh;
background: red;
}
#div2 {
width: 100%;
min-height: 20vh;
background: yellow;
}
#div3 {
width: 100%;
min-height: 60vh;
background: green;
}
p {
margin: 0;
}<div id="container">
<div id="div1">
<p>Benchmark compelling customized, "enhance revolutionize drive, bleeding-edge revolutionize world-class," peer-to-peer, revolutionize visualize aggregate. Strategize engage paradigms; interfaces, relationships monetize partnerships deliver envisioneer one-to-one wireless niches ecologies content data-driven harness engage strategize authentic frictionless, web-enabled; viral. Channels communities repurpose disintermediate incubate enhance webservices granular: envisioneer reintermediate open-source beta-test harness iterate blogging: ubiquitous morph widgets. Life-hacks; synergies metrics peer-to-peer, B2C turn-key relationships dynamic supply-chains, virtual schemas." Visualize one-to-one B2C integrateAJAX-enabled infrastructures empower networking synergies deliver dot-com enable seize disintermediate, viral drive blogging open-source. Wireless enhance magnetic sticky. Design envisioneer end-to-end: empower content embrace innovative bricks-and-clicks communities grow, action-items benchmark holistic holistic, "markets open-source; dot-com e-business revolutionary." Niches incubate niches plug-and-play methodologies web-readiness, end-to-end extend utilize mission-critical ubiquitous web services. Repurpose convergence generate transition morph matrix: initiatives real-time supply-chains web services benchmark users, innovate innovative global architectures technologies systems, deliver. Interactive Cluetrain relationships Cluetrain transparent interactive scale deliverables. Mindshare infomediaries generate interactive, reinvent platforms transparent enhance citizen-media, markets web-readiness clicks-and-mortar frictionless. Plug-and-play compelling generate channels synergies seamless integrate next-generation scale monetize integrateAJAX-enabled empower: data-driven; partnerships action-items. Utilize semantic leverage rich-clientAPIs user-centric transform, "cross-platform dot-com, communities incentivize intuitive, design real-time implement enhance harness applications global?" Communities, integrate expedite interactive whiteboard ubiquitous e-services leading-edge dynamic metrics 24/365, deliver seize vertical, blogging e-business one-to-one; magnetic deliverables beta-test capture user-centric bandwidth optimize. B2C deliver B2B efficient Cluetrain A-list technologies, design podcasts tag orchestrate syndicate cross-platform enable, initiatives mindshare one-to-one viral partnerships interfaces.</p>
</div>
<div id="div2">
<p>Benchmark compelling customized, "enhance revolutionize drive, bleeding-edge revolutionize world-class," peer-to-peer, revolutionize visualize aggregate. Strategize engage paradigms; interfaces, relationships monetize partnerships deliver envisioneer one-to-one wireless niches ecologies content data-driven harness engage strategize authentic frictionless, web-enabled; viral. Channels communities repurpose disintermediate incubate enhance webservices granular: envisioneer reintermediate open-source beta-test harness iterate blogging: ubiquitous morph widgets. Life-hacks; synergies metrics peer-to-peer, B2C turn-key relationships dynamic supply-chains, virtual schemas." Visualize one-to-one B2C integrateAJAX-enabled infrastructures empower networking synergies deliver dot-com enable seize disintermediate, viral drive blogging open-source. Wireless enhance magnetic sticky. Design envisioneer end-to-end: empower content embrace innovative bricks-and-clicks communities grow, action-items benchmark holistic holistic, "markets open-source; dot-com e-business revolutionary." Niches incubate niches plug-and-play methodologies web-readiness, end-to-end extend utilize mission-critical ubiquitous web services. Repurpose convergence generate transition morph matrix: initiatives real-time supply-chains web services benchmark users, innovate innovative global architectures technologies systems, deliver. Interactive Cluetrain relationships Cluetrain transparent interactive scale deliverables. Mindshare infomediaries generate interactive, reinvent platforms transparent enhance citizen-media, markets web-readiness clicks-and-mortar frictionless. Plug-and-play compelling generate channels synergies seamless integrate next-generation scale monetize integrateAJAX-enabled empower: data-driven; partnerships action-items. Utilize semantic leverage rich-clientAPIs user-centric transform, "cross-platform dot-com, communities incentivize intuitive, design real-time implement enhance harness applications global?" Communities, integrate expedite interactive whiteboard ubiquitous e-services leading-edge dynamic metrics 24/365, deliver seize vertical, blogging e-business one-to-one; magnetic deliverables beta-test capture user-centric bandwidth optimize. B2C deliver B2B efficient Cluetrain A-list technologies, design podcasts tag orchestrate syndicate cross-platform enable, initiatives mindshare one-to-one viral partnerships interfaces.</p>
</div>
<div id="div3">
<p>Benchmark compelling customized, "enhance revolutionize drive, bleeding-edge revolutionize world-class," peer-to-peer, revolutionize visualize aggregate. Strategize engage paradigms; interfaces, relationships monetize partnerships deliver envisioneer one-to-one wireless niches ecologies content data-driven harness engage strategize authentic frictionless, web-enabled; viral. Channels communities repurpose disintermediate incubate enhance webservices granular: envisioneer reintermediate open-source beta-test harness iterate blogging: ubiquitous morph widgets. Life-hacks; synergies metrics peer-to-peer, B2C turn-key relationships dynamic supply-chains, virtual schemas." Visualize one-to-one B2C integrateAJAX-enabled infrastructures empower networking synergies deliver dot-com enable seize disintermediate, viral drive blogging open-source. Wireless enhance magnetic sticky. Design envisioneer end-to-end: empower content embrace innovative bricks-and-clicks communities grow, action-items benchmark holistic holistic, "markets open-source; dot-com e-business revolutionary." Niches incubate niches plug-and-play methodologies web-readiness, end-to-end extend utilize mission-critical ubiquitous web services. Repurpose convergence generate transition morph matrix: initiatives real-time supply-chains web services benchmark users, innovate innovative global architectures technologies systems, deliver. Interactive Cluetrain relationships Cluetrain transparent interactive scale deliverables. Mindshare infomediaries generate interactive, reinvent platforms transparent enhance citizen-media, markets web-readiness clicks-and-mortar frictionless. Plug-and-play compelling generate channels synergies seamless integrate next-generation scale monetize integrateAJAX-enabled empower: data-driven; partnerships action-items. Utilize semantic leverage rich-clientAPIs user-centric transform, "cross-platform dot-com, communities incentivize intuitive, design real-time implement enhance harness applications global?" Communities, integrate expedite interactive whiteboard ubiquitous e-services leading-edge dynamic metrics 24/365, deliver seize vertical, blogging e-business one-to-one; magnetic deliverables beta-test capture user-centric bandwidth optimize. B2C deliver B2B efficient Cluetrain A-list technologies, design podcasts tag orchestrate syndicate cross-platform enable, initiatives mindshare one-to-one viral partnerships interfaces.</p>
</div>
</div>溢出：自动；
试试这个
#div1 {
width: 100%;
height: 20%;
border-style: solid;
border-width: 1px;
overflow: auto;
}