当前位置：文江博客话题详情

CSS - 如何制作 100% 高度的 2 列布局，标题高度未知

发布于 2024-12-14 05:30:46 字数 464 浏览 5 评论 0原文

我需要完成主题，但确实陷入了困境。为了更好地描述，我放了一张我需要得到的图片：

在此处输入图像描述

首先，我'我尝试使用 div 来实现，但由于 width 属性，它在 Firefox 中看起来完全不同。虽然我主要关心的是 IE8 非标准模式（这是要求），但我希望它在 Firefox 中看起来或多或少像样。

然后我尝试用两列表格来做，它在 IE 中运行良好，在 Firefox 中也运行良好，但由于某种原因，如果右列内容变得比屏幕宽，表格将无法容纳，并且我的内容会被水平裁剪表，不显示滚动条。

另外，查看了 Stackoverflow 上的早期帖子，使用 fixed 容器，但它似乎无法在 IE8 非标准模式下工作。

我们很高兴听到任何关于如何做到这一点的想法。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜巴黎 2024-12-21 05:30:46

也许你可以这样做：

.left{
    float:left;
    position:absolute;
    width:200px;
    background:red;
    border:2px solid #000;
    top:200px;
    bottom:0;
    left:0;

}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    top:200px;
    bottom:0;
    left:204px;
    right:0;
    border:10px solid #000;
}

html, body{
    min-height:100%;
    height:100%;
}
.header{
    width:100%;
    height:200px;
    background:yellow;
}

检查这个 http://jsfiddle.net/QHTeS/

May be you can do like this:

.left{
    float:left;
    position:absolute;
    width:200px;
    background:red;
    border:2px solid #000;
    top:200px;
    bottom:0;
    left:0;

}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    top:200px;
    bottom:0;
    left:204px;
    right:0;
    border:10px solid #000;
}

html, body{
    min-height:100%;
    height:100%;
}
.header{
    width:100%;
    height:200px;
    background:yellow;
}

Check this http://jsfiddle.net/QHTeS/

回复收藏 0 原文