Question

我有一个简单的问题。我想要调整框的宽度，但浏览器窗口大小是。基本上我有这个：

http://sc-cdn.scaleengine.net/i/1abc17e8e79b2c3739599001d3fe50f4.png（图片）

此代码..

CSS：

#container {

}

#main-container {
    margin-left: 200px;
    margin-top: 60px;
    display: inline-block;
}

.user-stats-container {
    margin-bottom: 25px;
}   

#main-content {
    border: 1px solid #eee;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    padding: 15px;
}

HTML代码：

<div id="notification-bar">
                notification bar Swag
            </div>

            <div id="container">

                <div id="side-bar">
                    <div class="side-bar-container">
                        side bar swag
                    </div>
                </div>

                <div id="main-container">

                    <div class="user-stats-container ">

                        user stats swag 

                    </div>

                    <div id="main-content">

                        Main content swag

                    </div>

                </div>

            </div>

main-content是我想调整的div，以便它穿过屏幕 - 长度明智但不太接近结束。我知道我肯定不需要设置宽度，因为它只会限制它。如果我没有清楚地解释这个问题，这里有一个我正在谈论的例子：

geedmo.com/ themeforest / wintermin / dashboard.html

注意缩小时，内容仍会调整到屏幕。这基本上是我想要的当前main-content div。

这是一个小提琴： Fiddle

我不完全确定如果我在解释自己，我会道歉。

谢谢！

Answer 1

克里斯，

您想要完成的任务，您需要在主内容div上使用一个百分比，并指定其父级的宽度。

但是，您的侧边栏和内容区域设置有点时髦，这就是为什么您必须将主要内容200px保留在左侧，这将导致您尝试使网站响应非常困难。你需要做什么：

side-bar和main-container都需要设置为：

position:relative;

除了摆脱所有左右边距。

然后将两个容器设置为

float:left;

让你的侧边栏宽度为20％或者你觉得最合适的尺寸，主要容器的宽度为80％。

然后将侧栏容器设置为固定位置

CSS框大小适合浏览器

1 个答案: