Question

我正在为我当前的一个网站制作新版本的布局。我已经设置了以下示例：http://jsfiddle.net/ckdm1m7q/

HTML：

<body>
    <nav><ul><li><a href="#">Home</a></li></ul></nav>
    <header>
        <img src="http://rockstartemplate.com/headerdesign/banner_green.jpg" />
    </header>
    <div id="wrapper">
        <section id="left_col"></section>
        <section id="right_col"></section>
        <main id="main_content">
        </main>
    </div>
    <footer>
        &copy; blah blah
    </footer>
</body>

的CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

nav {
    position: fixed;
    background: #000;
    height:27px;
    width: 100%;
}

nav ul, nav li {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    line-height: 27px;
}

nav a {
    color: #fff;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
}

header img {
    width: 100%;
    max-width: 1024px;
    display: block;
}

#wrapper {
    position: relative;
    top:0;
    height: 100%;
}

#left_col {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    bottom: 0;
    background: #eee;
    overflow:auto;
}

#right_col {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    bottom: 0;
    background: #eee;
    overflow:auto;
}

#main_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #666;
    margin-left: 240px;
    margin-right: 240px;
    overflow:auto;
}

footer {
    height:20px;
    line-height:20px;
    background: #000;
    color: #fff;
}

我希望#left_col，＃right_col和#main_content仅填充可用的视口区域（100％ - 27px - [标题 .height] - 20px）并可在该区域内滚动。< / p>

这很难，因为标题的高度会在较小的分辨率上发生变化。

纯html + css有可能吗？如果是这样，我怎么能实现它呢？

编辑：更好地解释我的目标：

#main_content需要在不移动，＃left_col或#right_col的情况下滚动。
#left_col和#right_col需要单独滚动，如果它们超出视口的底部
页脚可以移动到#main_content的底部，如果这样可以让事情变得更容易
标题不一定可见。

使用绝对位置，相对位置和固定位置以及可变高度标题

0 个答案: