0

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

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

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

索引.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>

样式.css

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

#container {
    border: 20px solid yellow;
}

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

标记并不那么重要。但是，我想避免使用非语义 div。我也更喜欢基于 CSS 的解决方案。​</p>

4

4 回答 4

1

干得好：

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

我不得不再添加一个 DIV，因为 .main 上的高度为 100%，而且它的填充使 .main 太高了。

于 2012-08-02T10:02:45.530 回答
0

像这样的事情需要一个非常简单的 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/

于 2014-04-02T04:48:49.617 回答
0

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

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

#container {
    min-height: 100%;
}

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

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

于 2012-08-02T10:03:32.637 回答
0

好吧，这可能晚了几年，但我最终写了这篇文章，对于其他这样做的人来说，这是我的解决方案：

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 的最小高度设置等于窗口的最小高度。这里的关键是最小高度，因此如果内容小于窗口，它将拉伸以适应，但如果内容较大，您将能够滚动并且没有任何东西被剪掉。

于 2016-11-24T01:47:09.330 回答