|
|
相关文章推荐
|
沉稳的炒饭 · C++矩阵寄算（二）：Fast than ...· 1 年前 · |
|
|
飘逸的小摩托 · PHP Dcat-admin 统计卡片 ...· 1 年前 · |
|
|
直爽的小蝌蚪 · go - Alpine docker ...· 1 年前 · |
|
|
温文尔雅的砖头 · Markdown 段落格式 | 菜鸟教程· 1 年前 · |
|
|
绅士的莲藕 · java - What is the ...· 1 年前 · |
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+上面显示的(1)的内容是未知的，因为它可能在动态生成的页面中增加或减少。如上所述，第二个div (2)应该会填充剩余的空间。
下面是我的html的一个例子
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>css...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}或者这种方法是错误的？我该怎么做呢？请看我的，看看我的错误。
8 个回答
高票数
最新
Stack Overflow用户
修改于2013-03-13 11:54
得票数
12
要在页面上将
div
设置为100%的高度，您需要将div以上的层次结构中的每个对象也设置为100%。例如：
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }虽然我不能完全理解你的问题，但我猜这就是你的意思。
这是我正在使用的示例：
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</body>
</html>
Style
只是CSS的替代品，我还没有外化它。
Stack Overflow用户
修改于2016-05-29 20:50
得票数
65
如果你添加一个div (下面的
#header
)来包装你的内容1，你应该能够做到这一点。
-
如果浮动
#header，则#someid中的内容将被强制围绕它流动。 -
接下来，您将
#header的宽度设置为100%。这将使其展开以填充包含的div#full的宽度。这将有效地将#someid的所有内容推到D10以下。由于没有空间围绕边流动，因此将D13的高度设置为100%，这将使其高度与div相同
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>CSS
html, body, #full, #someid {
height: 100%;
#header {
float: left;
width: 100%;
}
更新
我认为值得一提的是，flexbox在当今的浏览器中得到了很好的支持。如果
#full
变成了flex容器，那么CSS可能会被改变，并且
#someid
应该将它的flex grow设置为大于
0
的值。
html, body, #full {
height: 100%;
#full {
display: flex;
flex-direction: column;
#someid {
flex-grow: 1;
}
Stack Overflow用户
回答于2015-05-08 02:57
得票数
0
我为太短的页面添加了这个。
html：
<section id="secondary-foot"></section>css：
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
Stack Overflow用户
回答于2015-08-12 06:14
得票数
5
这可以通过表来完成：
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</td></tr>
</table>然后应用css以使某一to填充剩余空间：
#someid {
height: 100%;
}现在，我只听到人群中愤怒的喊叫声，“哦，不，他在用桌子！把他喂给狮子！”请听我说完。
与公认的答案不同的是，除了使容器div达到页面的完整高度之外，它什么也做不了，这个解决方案使div #2按照问题中的要求填充剩余空间。如果您需要第二个div来填充分配给它的整个高度，这是目前唯一的方法。
当然，请随时证明我是错的！CSS总是更好。
Stack Overflow用户
修改于2016-02-16 23:34
得票数
6
html,
body {
height: 100%;
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
.child-top {
flex: 0 1 auto;
background: pink;
.child-bottom {
flex: 1 1 auto;
background: green;
} <div class="parent">
<div class="child-top">
This child has just a bit of content
<div class="child-bottom">
And this one fills the rest
</div>
Stack Overflow用户
回答于2016-05-25 19:29
得票数
1
我知道这是一个较晚的入门，但即使在2016年，我也很惊讶于完全缺乏对flex的IE支持(目前11是唯一支持它的人，而且它在那个 http://caniuse.com/#feat=flexbox 上有主要的but )，这从商业角度来看并不是很好！所以我认为，在IE关闭之前，最好的解决方案和最好的跨浏览器友好的解决方案肯定是JS/Jquery解决方案？
大多数站点已经在使用Jquery，一个非常简单的例子(对于我的代码)是：
$('#auto_height_item').height($(window).height() - $('#header').height());显然，您可以替换窗口和标题，并让基本的数学运算来完成这项工作。就我个人而言，我还不太相信flex ...
Stack Overflow用户
回答于2018-07-04 05:34
得票数
0
创建一个div，其中包含div (full和someid)，并将该div的高度设置为以下值：
高度: 100vh；
包含div (full和someid)的高度应该设置为"auto“。就这样。
推荐文章
|
|
温文尔雅的砖头 · Markdown 段落格式 | 菜鸟教程 1 年前 |