Question

我正在努力使内容框（Div）在浏览器宽度更改时自动重新调整大小。

侧边栏有一个设定的宽度。

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="Wrapper">
            <div id="header">
                Stuff
            </div>

            <div id="sidebar">
                Text<br/>Sidebar
            </div>

            <div id="content">
                Stuff<br/>text<br/>Just to fill some space
            </div>

            <div id="footer">
                Stuff
            </div>
        </div>
    </body>
</html>

的style.css：

#wrapper{
    width:90%;
}
#header{
    width:100%;
    height:50px;
    background-color:lightblue;
}
#content{
    /* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
    margin-top:4px;
    background-color:yellow;
}
#sidebar{
    width:100px;
    float:right;
    margin-top:4px;
    background-color:pink;
}
#footer{
    width:100%;
    height:40px;
    margin-top:4px;
    background-color:red;
}

请注意，这只是我在编写此问题时编写的代码。我所做的就是错过了与问题无关的额外代码。

这应该（未经测试）在顶部显示标题，在底部显示页脚。

我需要帮助的部分是中间部分。

当浏览器宽度发生变化时（较小的较大），侧边栏将保持在右侧。

我希望“#content”框自动重新调整大小，以便“#content”框和“#footer”框之间存在间隙。

我已尝试过css width％值，但这不起作用。

css可以这样做吗？

如果没有，我可以获得任何可以做到这一点的php或javascript吗？

Answer 1

小提琴： http://jsfiddle.net/logintomyk/fQPse/

HTML （您需要修改）：

 <div id="content">
                <p> <!-- add a paragrap -->
                       Stuff<br/>text<br/>Just to fill some space
                </p>
            </div>

CSS （您需要修改）：

#content >p {margin-right:100px;margin-top:0px}

Answer 2

将overflow: hidden添加到#content。这使得它使用宽度的“休息”，侧边栏的浏览器宽度减去100px。

如果您想在侧边栏和实际内容之间加一点额外的内容，请将以下内容添加到#content：

box-sizing：border-box; padding-right：20px; / *（或其他）* /

小提琴：http://jsfiddle.net/urEbY/1/

css定位：设置侧边栏宽度，改变内容框宽度

2 个答案: