Question

我正在寻找一种方法来创建一个具有此布局的跨浏览器兼容的网站（对于丑陋的模板抱歉）：

http://www.sim3media.com/stuff/layout.png

我尝试了一些不同的解决方案但似乎没有解决方案（弹性框，绝对定位）。

以下是我当前代码的链接：

http://www.sim3media.com/test/index.html

这是我目前的代码。

CSS：

.row { overflow: hidden; position: absolute; }
.scroll-y { overflow-y: auto; }

.wrapper {
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
    min-width: 320px;
    position: relative;
}

header.row {
    background-color: rgba(0,0,0,0.6);
    color: #FFFFFF;
    height: 100px; 
    width: 100%;
    top: 0;
}

content.row {
    background-color: rgba(255,255,255,0.8);
    top: 140px;
    bottom: 140px;
    width: 100%;
    min-height: 200px;
}

footer.row {
    background-color: rgba(0,0,0,0.6);
    color: #FFFFFF;
    height: 100px; 
    width: 100%;
    bottom: 0;
}

HTML：

<div class='wrapper'>
    <header class='row'>
            Header
    </header>
</div>

<div class='wrapper'>
    <content class='row scroll-y'>
        Content<br/>
    </content>
</div>

<footer class='row'>
    Footer
</footer>

如果我使用＆＃34; position：relative＆＃34;在我的包装器中，我的包装器将正常运行。但是，我的内容div不会使用100％的可用高度。另一方面，如果我不使用＆＃34; position：relative＆＃34;在我的包装器中，我的内容div将使用所有可用的高度，但是包装器本身将无法正常工作（内容和标题背景将溢出到右侧）。如果您在我上面提供的链接中使用index2.html而不是index.html，您将看到我的意思（由于我没有足够的声誉，因此无法发布这两个链接）。

是否有任何完全兼容浏览器的解决方案可以实现此结果？我宁愿不使用Javascript这样做，但如果我别无选择，我愿意接受这个想法。

非常感谢你的帮助。

Answer 1

删除<content>周围的div.wrapper，这只会让事情变得复杂。

删除div.wrapper后，在<content>上使用以下规则：

top: 140px;
bottom: 140px;
min-height: 200px;
max-width: 1200px;
left: 50%;
transform: translateX(-50%);
width: 100%;

这是使用left:50% / translate -50%技巧水平居中。 Checkout this article了解有关CSS中动态居中的更多信息。

内容div填充所有可用高度，具有自动尺寸宽度包装

1 个答案: