Question

我有一个带有文字内容的div。我希望div高度扩展到浏览器窗口（视图区域）的整个高度，即使它的内容不是很高。

如果内容溢出窗口的高度，我想要默认行为。即出现滚动条并且div高度与视图区域高度不同。

我在jsfiddle http://jsfiddle.net/bernard/gLjYg/16/上添加了一些代码。黄色边框应覆盖整个窗口区域，除非您缩小窗口大小，以便不是所有文本都可见。在这种情况下，文本应该是可滚动的，底部或顶部边框将被隐藏。

的index.html

<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
</head>

<body>
<div id="container">
    <div class="main">
        <h1>Think of a Nat Geo frame</h1><br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>
</div>

</body>
</html>

的style.css

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    border: 20px solid yellow;
}

.main {
    background-color: white;
    padding: 2em;
}

标记并不重要。然而，我想避免非语义div。我也更喜欢基于CSS的解决方案。

Answer 1

你走了：

http://jsfiddle.net/gLjYg/10/

我必须添加一个DIV，因为它的高度为100％.main加上它的填充物。它太高了。

Answer 2

有什么理由你必须在两个div之间拆分border和填充？如果没有，我会用这个：

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    min-height: 100%;
}

.main {
    background-color: white;
    padding: 2em;
    border: 20px solid yellow;
}

我似乎无法弄清楚为什么body, html不会伸展到全高。

Answer 3

这样的事情需要一个非常简单的javascript修复！你需要先在页面加载后设置容器的高度。在此之后，您将不得不使用窗口调整大小事件处理程序来检查窗口的新高度是否小于原始高度。如果较小，则使容器可滚动，同时确保高度也已调整。如果窗口调整大小恢复到原始高度或更大。这个容器将恢复到原来的状态。

<script>
var origHeight,container;
window.onload=function(){
origHeight= window.innerHeight;
container= document.getElementById("container");

};

window.addEventListener("resize", function(){
 container.style.height=window.innerHeight+"px";  
if(window.innerHeight< origHeight){

container.style.overflowY="auto";
}
else{

container.style.overflowY="default";
}

});
</script>

这就是解决不同高度问题所需的一切！

这是小提琴 http://jsfiddle.net/gLjYg/25/

Answer 4

嗯，这可能要晚了几年，但我最后还是写了这篇文章，其他任何人都是我的解决方案：

http://jsfiddle.net/gLjYg/59/

首先，我将所有内容都放在一个div中：

<div class="main">
  <h1>Think of a Nat Geo frame</h1>
  <p>Lorem ipsum...</p>
</div>

然后，为了更容易理解宽度/高度测量（包括填充等），我在css中包含了边框框尺寸：

* {
  box-sizing: border-box;
}

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

.main {
  border: 20px solid yellow;
  background-color: white;
  padding: 2em;
  margin: 0;
}

最后，添加了以下javascript（使用jQuery）：

var $selector = $('.main');

setToWindowHeight($selector);
$(window).resize(function (){
  setToWindowHeight($selector);
});

function setToWindowHeight(selector) {
  selector.css({ 'min-height': $(window).innerHeight() });
}

在页面加载时，在调整大小时，.main div的最小高度设置等于窗口的最小高度。这里的关键是min-height，所以如果内容小于窗口，它将拉伸到适合，但如果内容更大，你将能够滚动，没有任何内容被剪切出视图。

如果内容较小，则Div扩展到窗口的全高

4 个答案: