html不设置高度position,css3：如何将高度100％放在静态/相对（无绝对定位）div上？(css3 : how to put height 100% on a static/relati...

css3：如何将高度100％放在静态/相对(无绝对定位)div上？(css3 : how to put height 100% on a static/relative (no absolute positionned) div?)

我有一个容器和2个div：1个标题(如果我添加一些行，它的高度应该是空闲的)和userList。 我希望userList具有容器的高度：任何想法如何？ (没有JS解决方案，如果没有位置则更好：使用asbolute)

#container {

width: 300px;

height:400px;

background-color: #FF0000;

}

#header{

background-color: #FFF500;

}

#userList {

background-color: #00FF00;

width:290px;

height: 100%;

overflow-y:auto;

}

line1
line2
line3

line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

I have a container and 2 divs inside: 1 header (whose height should be free if I add some lines) and an userList. I want the userList to have the height of the container : any idea how ? (no JS solution, better if no position: asbolute used)

#container {

width: 300px;

height:400px;

background-color: #FF0000;

}

#header{

background-color: #FFF500;

}

#userList {

background-color: #00FF00;

width:290px;

height: 100%;

overflow-y:auto;

}

line1
line2
line3

line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

原文：https://stackoverflow.com/questions/35265607

更新时间：2019-09-20 11:27

相关问答

我已经完成并重写了代码，没有使用块文本或标题文本的任何高度，只使用Flex。 如果你使用display: flex; 只在容器中包含柔性物品，然后告诉每个物品如何变得灵活(即flex-grow: 1; )，你会得到你要找的结果。 这里有一个链接，我把你的初始代码放在一起，然后重新编写代码。 如果您有任何问题或需要澄清任何事情，请告知我。 body {

font-family: 'Bitter', Georgia, serif;

width: 673px;

}

a { color:

...

如果您只是尝试将背景颜色扩展到页面底部，则可以实现一些好的“人造”列： http://www.alistapart.com/articles/fauxcolumns/ 我们的想法是将背景图像添加到与“B”列宽度相同的容器div(或body元素)中。 使用background-position使其正确对齐，然后将background-repeat设置为repeat-y。 此外，对于它的价值，对文档中的每个元素使用绝对定位几乎肯定会导致比它解决的问题更多的问题。 我建议更好地尝试使用普通文档流来使您的

...

百分比值相对于容器的大小，即容器标签的大小。 你可以设置html, body { height: 100%; } 使它工作。 html,

body {

height: 100%;

margin: 0;

}

.div1,

.div2 {

height: 100%;

background-size: cover;

background-position: center;

}

.div1 {

background-image: url("http:

...

好伙伴...这个解决方案可能适合你但是它可能不是很漂亮(我讨厌使用!important )并且需要一点点jquery。 基本上我在评论中写道，如果height可以是固定值，那么这是一个简单的解决方案，但事实并非如此。 但是我们可以使用jquery计算高度并将值应用于每个标题。 我们需要通过每个容器的不同类。 在你的情况下，如：

...

它是500px高，但大部分是由于overflow: hidden在#wrap 。 您需要删除它或使其大到足以包含#swipe 。 It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.

我无法像现在这样做，所以这就是我所做的。 CSS文件： body, html {border: 0px; margin: 0px; padding: 0px;

height:100%; position:relative; width:100%;}

#head

{

position:absolute;

background-color: #98a;

height: 100px;

width:100%;

top:0px;

}

#footer

{

position:absolute;

...

你可以使用height:calc(100% - 175px); 为了这： http://jsfiddle.net/9ygz4pnj/ html,body,#container{

height:100%;

}

#top{

height:175px;

border:1px solid red;

}

#bottom{

height:calc(100% - 175px);

border:1px solid green;

}

You can use height

...

我相信这可能是你追求的。 我已经重构了一下你的页面。 我已将整个事件分成两列 - 左侧( #main )宽度为200px，右侧( #main )填充剩余空间。 他们一起在一个容器div( #container )中。 因为容器将扩展以适合内容，并且它完全隐藏在侧栏之外，您可以为此容器着色以更改导航的背景颜色。 这是代码： HTML

SIDE COLUMN

...

显示：弯曲; 可能是年轻浏览器的一种方式。 DEMO 您需要额外的标记来使链接中的文本居中/中间。 HTML测试基地：

Link1

Link2

Link3

...