html – CSS：设置div高度以填充父div,无位置：abolute;_html-js-css

概述我(再次)有适应孩子的问题< div>标签的大小为其父级大小.父元素由另一个脚本控制(不想触摸它),并且可以放置在屏幕上具有可变高度/宽度的任何位置.在我下面的例子中,这是#container.我想在其中放置一些布局,它有一些变量和一些固定的尺寸： >一个页脚(这里：#footer),具有固定的高度(例如100px)并填充父级的整个宽度 >左侧的导航栏(此处为：#left),具有固定宽度(例如15 我(再次)有适应孩子的问题< div>标签的大小为其父级大小.父元素由另一个脚本控制(不想触摸它),并且可以放置在屏幕上具有可变高度/宽度的任何位置.在我下面的例子中,这是#container.我想在其中放置一些布局,它有一些变量和一些固定的尺寸：

>一个页脚(这里：#footer),具有固定的高度(例如100px)并填充父级的整个宽度
>左侧的导航栏(此处为：#left),具有固定宽度(例如150px)并填满上部的整个高度
>导航栏中的内容部分,即剩余空间.

我找到了“页脚”的一些解决方案,实际上有效(Make a div fill the height of the remaining screen space – >’danIEls’的发布).但我无法实现#left部分来填满整个高度.

下面是我的示例代码(在线版本：http://worldtalk.de/v2013/test.html;不会永远在线！)：

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head>    <Title>Title</Title>    <Meta http-equiv="content-type" content="text/HTML; charset=utf-8" />    <style type="text/CSS" media="screen">    * {  margin: 0; }    HTML,body { height: 100%; }    #container {        position: absolute; /* have no control over that container element */        wIDth: 400px;  height: 300px;        top: 100px;    left: 10px;        background: red;    }    #upper {        min-height: 100%;        height:     auto !important;        height:     100%;        margin:     0 auto -100px; /* -100px being the size of the footer */    }    #footer {        background: green;        height: 100px;    }    #left {      background: yellow;      float: left; wIDth: 150px;      /* the following CSS doesn't do what I want... */      min-height: 100%;      height:     auto !important;      height: 100%;    }    </style></head><body>    <div ID="container">      <div ID="upper">        <div ID="left">left - shall reach down until footer</div>        content part...<br> shall be next to it...      </div>      <div ID="footer">footer</div>    </div></body></HTML>

有没有使用JavaScript实现这一点的想法？

问候,
斯特凡

解决方法解决方案1

我假设位置问题：绝对;是左侧导航将放置在页脚的顶部,但是这里是左侧导航和页脚使用绝对的解决方案.与之相关的缺陷是左侧导航在页脚下继续,这可能是也可能不是问题.

#footer {  position:absolute;  left:0;  right:0;}#left {  position:absolute;  bottom:0;}

http://jsfiddle.net/LmCLz/1/

解决方案2

像这样重新排列元素：

<div ID="container">    <div >        <div ID="left">left - shall reach down until footer</div>        <div ID="right">content part...<br> shall be next to it...</div>        <div ></div>    </div>    <div ID="footer">footer</div></div>

然后应用margin-bottom：-100px;为页脚腾出空间：

.inner {    height:100%;    margin-bottom:-100px;}

http://jsfiddle.net/LmCLz/3/

总结

以上是内存溢出为你收集整理的html – CSS：设置div高度以填充父div,无位置：abolute;全部内容，希望文章能够帮你解决html – CSS：设置div高度以填充父div,无位置：abolute;所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1063510.html

html – CSS：设置div高度以填充父div,无位置：abolute;

发表评论

评论列表（0条）