博主在尝试创建一个页面布局，包含一个固定底部的页脚、固定宽度的左侧导航栏以及填充剩余空间的内容区域。已经解决了页脚填充屏幕剩余空间的问题，但对于左侧导航栏填充整个高度仍然困扰。博客讨论了尝试过的CSS方法，并询问是否能用JavaScript实现这个效果。
我(再次)有适应孩子的问题< div>标签的大小为其父级大小.父元素由另一个脚本控制(不想触摸它),并且可以放置在屏幕上具有可变高度/宽度的任何位置.在我下面的例子中,这是#container.我想在其中放置一些布局,它有一些变量和一些固定的尺寸：
>一个页脚(这里：#footer),具有固定的高度(例如100px)并填充父级的整个宽度
>左侧的导航栏(此处为：#left),具有固定宽度(例如150px)并填满上部的整个高度
>导航栏中的内容部分,即剩余空间.
我找到了“页脚”的一些解决方案,实际上有效(Make a div fill the height of the remaining screen space – >’daniels’的发布).但我无法实现#left部分来填满整个高度.
Title* { 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%;
}
content part...
shall be next to it...
有没有使用JavaScript实现这一点的想法？
问候,
斯特凡
扫一扫
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
