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

时间：2015-04-03 11:15:05

标签： html css resolution

我有以下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高度）。

8 个答案:

答案 0 :(得分：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的工作示例。整体browser support非常好。

答案 1 :(得分：1)

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

据我所知，你的问题是你的容器高度是用百分比定义的（允许它们在不同的屏幕分辨率下正确地重新设置）但是，当你的内容在容器中增长时，它会重叠你下面的容器。

嗯......首先，如果你想避免你的内容增加你的容器，你应该使用overflow：auto，而不是overflow：hidden。当内容占用的空间超过其容量时，应自动将滚动条添加到容器中。

请注意，内容比设计更重要，因此如果您的内容大于您预留的内容，默认情况下，浏览器会使您的容器适合所需的空间。

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

答案 2 :(得分：1)

如果我理解，不要为孩子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％高度。< / p>

答案 3 :(得分：0)

我试着这个，我不确定你是否正在寻找。

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

答案 4 :(得分：0)

尝试在div上使用min-height而不是height，并删除div上的宽度：

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

宽度被删除，因为默认情况下div是块元素，块元素将采用完整的可用宽度。

块元素也会倾向于“推送”内容。在您的示例中，您通过设置width属性来限制此推送效果，该属性告诉浏览器永远不会将该元素增大到大于屏幕大小的x％。

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

要检查的另一件事是“盒子大小”属性。当您告诉浏览器在元素上使用40％宽度时，是否要在40％中包含该元素的填充和边距？如果是这样的话：

box-sizing: border-box

答案 5 :(得分：0)

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

答案 6 :(得分：0)

我会使用视口单元......你不应该指定高度，或者你的内容可以扩展到容器之外 - 下一个 - 使用最小高度代替......

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

内容示例：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：0)

  

溢出：自动;

试试这个

#div1 {
    width: 100%;
    height: 20%;
    border-style: solid;
    border-width: 1px;
    overflow: auto;
}
相关问题
最新问题