代码之家 › 专栏 › 技术社区 › Alec Smart

CSS布局、固定和流体混合的相对宽度

css javascript

Alec Smart · 技术社区 · 15 年前

我正在尝试进行如下聊天室布局:

现在我的问题是,我不确定如何让容器框占据整个宽度和高度(使用有效的doctype),然后如果窗口增长,则使center div增长,使rest保持不变。

我很清楚JS/CSS。所以我只需要一些开始的指导。我希望避免使用javascript进行处理,然后设置高度和宽度。

chatroom layout

现在我的问题是,我不确定如何让容器框占据整个宽度和高度(使用有效的doctype),然后在窗口增长时使中心DIV增长,使其余部分保持不变。

我很清楚JS/CSS。所以我只需要一些开始的指导。我希望避免使用JavaScript进行处理,然后设置高度和宽度。

1 回复 | 直到 10 年前

Mr. Polywhirl 10 年前

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    height: 100%;
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    width: 100%;
}
.header {
    display: block;
    height: 100px;
    width: 100%;
}
.body-left {
    float: left;
    width: 70%;
}
.body-right {
    float: right;
    width: 30%;
}
.clear {
    clear: both;
}
.footer {
    float: left;
    width: 70%;
}

和HTML

<div id="container">
    <div class="header"></div>
    <div class="body-left"></div>
    <div class="body-right"></div>
    <div class="clear"></div>
    <div class="footer"></div>
</div>

就是这样,如果这就是你想要的

或者使用以下javascript查找高度并将其分配给容器:

function getWindowHeight() {
    var windowHeight = 0;

    if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }

    return windowHeight;
}

window.onload = init;

function init() {
    document.getElementByID("container").style.height = getWindowHeight() + "px";
}

推荐文章