将 div 的高度提高到浏览器分辨率以上的百分比

Question

我有以下 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 height.Container div 的高度是我的 viewport.And 3 div 的总和的 100%也是100%。此时我没有垂直滚动条，因为内容没有超出视口。

如果我在里面添加一些内容，子项 div 将相互推动，因此会出现一个垂直滚动条，因为内容的总高度超过了视口（768px 高度）。但是子项divs 也与父级 div 重叠，因为它被设置为浏览器大小的 100%。

我需要找到一种方法，使容器保持在 viewport.Logically 的 100% 高度，它应该使用视口更改一次大小，因为它是用动态测量设置的，但它没有't.The 容器有 768px，但现在，因为内容更大，视口值是另一个（例如：900px 高度）。

Answer 1

Viewport units 应该可以解决问题。

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. Overall browser support 看到一个工作示例非常好。

Answer 2

我不确定我是否正确理解了你的问题。

据我所知，你的问题是你的容器高度是用百分比定义的（以允许它们在不同的屏幕分辨率下正确调整）但是，当你的内容在容器中增长时，它与您在下面的容器。

嗯......首先，如果你想避免你的内容使你的容器变大，你应该使用 overflow:auto，而不是 overflow:hidden。这应该会在内容占用的空间超过 space 时自动将滚动条添加到您的容器中。

请记住，内容比设计更重要，因此如果您的内容大于您为其保留的 space，默认情况下浏览器会将您的容器调整为所需的 space .

这里奇怪的是下面的容器应该被生长的容器向下推，而不是被它重叠。这让我觉得可能有更多的代码干扰了您向我们展示的简单示例？

Answer 3

我自己试过了，我不确定这是否是你要找的。

$(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>

Answer 4

尝试在 div 上使用最小高度而不是高度，并删除 div 上的宽度：

#div1{ min-height: 20% }
#div2{ min-height: 20% }
#div3{ min-height: 60% }

宽度被移除，因为默认情况下 div 是块元素，块元素将占据全部可用宽度。

块元素也将倾向于 "push" 内容向下。在您的示例中，您通过设置宽度属性限制了这种推送效果，这告诉浏览器永远不要将该元素增大到大于屏幕尺寸的 x%。

通过在元素上设置最小宽度，您基本上是在告诉浏览器，如果有更多内容，则扩大元素以容纳内容。

要检查的另一件事是 "box-sizing" 属性。当你告诉浏览器在一个元素上使用 40% 的宽度时，你想在 40% 中包括该元素的填充和边距吗？如果是：

box-sizing: border-box

Answer 5

已编辑以添加浏览器支持的 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 --->

Answer 6

我会使用视口单位...不过您不应该指定高度，否则您的内容可能会超出容器延伸到下一个 - 请改用最小高度...

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>

Answer 7

overflow : auto;

试试这个

#div1 {
    width: 100%;
    height: 20%;
    border-style: solid;
    border-width: 1px;
    overflow: auto;
}

Answer 8

如果我理解正确，请不要为 child 设置任何高度值 divs.They 应该在内容增长时扩展，或者您可以只给出 min-height 这样的条件.另外我建议你使用vh，但如果你愿意的话，只能用于container.And，你可以设置一个宽度，我认为这不会造成任何麻烦，但请记住divs将自动具有 parent 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% 高度，如果您的内容更大，child div 将相互推动容器 div将是新视口的 100% 高度。

将 div 的高度提高到浏览器分辨率以上的百分比

Increase div's height above browser resolution with percentage

html

css

resolution