Question

我正在努力实现目标。让我们举个例子，我在身体里面有一个div，或者身体本身，我给它一个边缘有一些边缘，我给它100％的宽度和高度，但因为我需要内容让它向下伸展..

所以我有这样的事情：

Div with full with and small height

这就是我希望它在每个决议中的表现，无论其内容如何：

Fullscreen div

我如何实现这一目标？

Answer 1

示例：http://run.plnkr.co/qax6TBmBe1QeF3xg/

CSS：

.container
{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  border:solid 2px black;
  overflow:auto;
}

HTML：

<body>
    <div class="container">
    </div>
</body>

Answer 2

有多种方法可以实现这一目标。如果您可以将div从正常文档流中取出（意味着其他元素将与其重叠或重叠），则使用绝对定位（Demo）：

position: absolute;
top: 0; right: 0; left: 0; bottom: 0;

/* border, margin, etc. styles */

要允许在其中滚动，请添加（Demo）：

position: fixed;
overflow: auto;

如果您希望它像普通div和其他内容一样，请执行以下操作（Demo）：

html, body {
    width: 100%; height: 100%; /* So inner elements can be relatively positioned */
    margin: 0; padding: 0; /* So scrollbars don't appear */
}

.container {
    position: relative;
    width: 100%; height: 100%;
}

.inner {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;

    /* border, margin, etc. styles */
}

Answer 3

我们可以做到。但是在jQuery / JS的帮助下......

请记下以下代码。！

HTML - ＆GT;标记...
css - ＆gt;基本样式...
js / jquery - ＆gt;“在您要使用的容器/包装器或'div'的高度透视图中提供基于相对的设计。

<div>
  Text inside DIV...<br/>-----<br/>-----<br/>
  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 centur.....
</div>

请注意以下css

*,*:after,*:before{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
div {
  position:fixed;
  width:96%;
  top:2%;
  left:2%;
  border:20px solid #000;
  overflow:auto;
}

我正在使用js（jquery库）来使容器的高度响应。

请记下JQUERY代码，状态＆amp;窗口事件。

$(document).ready(function(e){
  var windowHeight = $(window).height();
  $("div").height(windowHeight-50);
});
$(window).resize(function(e){
  var windowHeight = $(window).height();
  $("div").height(windowHeight-50);
});

注意：我在这里插入了所有文字......！

为了更具未来感，您可以更新div的CSS样式，使边框贴在身体边框上。

请记下以下链接..

Codepen Example

Answer 4

最简单的解决方案，不需要position: absolute;。

Have a fiddle!

HTML

<div id="wrap"></div>

CSS

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
}
body {
    padding: 10px;
}
#wrap {
    border: solid 2px #000;
    height: 100%;
    padding: 10px;
    overflow-y: scroll;
}

适用于所有分辨率的全屏CSS帧，无论内容如何

4 个答案: