css页眉标签,javascript – 使用带有固定页眉和页脚的css的可变内容div高度

我在使用CSS时遇到了一些麻烦,我正在寻求这个精彩社区的帮助.

我正在尝试构建包含以下元素的布局：

1)标题区域

2)页脚区域

3)左侧窗格

4)内容区域

我提出了以下CSS,但我不相信这是做我需要的最好方法.

请在下面找到我正在寻找的图片,包括所有细节.另外,下面是我目前的CSS和HTML.

CSS：

* {

margin: 0;

}

html, body {

height: 100%;

overflow: hidden;

}

#wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -100px;

}

#leftbar {

float: left;

width: 350px;

background-color: #EAEAEA;

height: 100%;

position: absolute;

z-index: -1;

}

#rightbar {

}

#footer {

height: 100px;

}

#header {

height: 100px;

}

HTML：

所需的布局：

请注意,虽然我不介意使用jQuery和javascript来实现这一点,但我想避免它.

任何帮助将不胜感激.

谢谢！

解决方法:

this fiddle是否符合您的要求？我无法确定你是否希望页脚始终位于页面底部.

更新

标签：jquery,javascript,css,html

来源： https://codeday.me/bug/20190626/1295373.html