Question

我已经试图找到解决方案好几天了，但是没有发现任何有效的方法。我以为我最终会在这个伟大的网站上创建一个帐户，所以这里有：

我试图让div从左向右扩展，两边有170px的间隙。但是，当页面上没有内容或只有几个单词时，div不会扩展。我试图在几个不同的div中添加宽度：100％来尝试让它们占用整个空间，但是要么什么都不做，要么完全破坏页面布局。例如，不是填写页面，而是应该保留内容的div移出屏幕的右侧，也不会留下170px的边距。

我希望你能提供帮助，我的代码发布在下面：提前致谢，克里斯

html：

<html>
<body>
<div id="wrapper">
    <div id="pagetopwrap">
    </div>
    <div id="pagemainliquid">
        <div id="pagemainwrap">
            <div id="content">

                <div id="headerwrap">
                    <div id="header_left">
                    </div>
                    <div id="header_main">
                        <div id="logo_row">
                            <p id="logotext">Site Title</p>
                        </div>
                        <div id="menu_row">
                            <!-- irrelevant menu button code -->
                        </div>
                    </div>
                    <div id="header_right">
                    </div>
                </div>
                <div id="contentbody">
                    <div id="contenttext">
                        <p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
                    </div>
                </div>
             </div>
        </div>
    </div>
    <div id="leftcolumnwrap">
        <div id="leftcolumn">
        </div>
    </div>
    <div id="rightcolumnwrap">
        <div id="rightcolumn">
        </div>
    </div>
    <div id="footerwrap">
        <div id="footer">
        </div>
    </div>
</div>
</body>
</html>

css：它的排序不是很好，不感兴趣的方面，顶部和页脚都是第一个，而网站的主要部分位于底部

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #0f0f0f; /* is normally an image */
}

#wrapper {
    width: 100%;
    min-width: 960px;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%
}

#pagetopwrap {
    height: 50px;
    width: 100%;
    float: left;
    margin: 0 auto;
}


#pagemainliquid {
    float: left;
}

#pagemainwrap {
    margin-left: 170px;
    margin-right: 170px;
    float: left;
}

#leftcolumnwrap {
    width: 170px;
    margin-left:-100%;
    float: left;
}

#leftcolumn {
    margin: 5px;
}

#rightcolumnwrap {
    width: 170px;
    margin-left: -150px;
    float: left;
}

#rightcolumn {
    margin: 5px;
}

#footerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
    clear: both;
    bottom:50px;
}

#footer {
    height: 0px;
    margin: 5px;
}

#headerwrap {
    width: 100%;
    margin: 0 auto;
}
#header_left {
    background-color: #ff0000; /* is normally an image */
    width:25px;
    height:200px;
    float:left;
}
#header_right {
    background-color: #ff0000; /* is normally an image */
    width:25px;
    height:200px;
    margin-left: 0px;
    float:right;
    position:relative; top:-200px;
}
#header_main {
    background-color: #00ff00; /* is normally an image */
    margin-left: 25px;
    margin-right: 25px;
    height:200px;
    background-size: 100% 200px; 
}
#contentbody {
    background-color: #E2E2E2;
    border-radius: 10px;
    margin-top:10px;
    border: 1px solid #A7A7B2;
}
#contenttext {
    margin-left:10px;
    margin-right:10px;
}
#logo_row {
    height:150px;
    width:100%;
    float:left;
}
#logotext {
    margin-top:20px;
    margin-left:10px;
    vertical-align: middle;
    font-size: 55px;
    font-family: "Arial Black", Arial;
}
#contenttextmakeup {
    margin-top:12px;
    margin-left:10px;
    vertical-align: middle;
}
#menu_row {
    width:100%;
}
button.menubutton {
/* irrelevant button markup */
}

http://jsfiddle.net/w9qLh6tp/如果有帮助，我在这里看到了很多：）

Answer 1

不要使用！important，而是要弄清楚为什么重要的工作会让人头疼。

CSS =级联样式表。你有一个更具特异性的选择器，这就是你的宽度属性没有变化的原因。找出问题的路线将在以后再次发生这种情况时节省您的时间（并且会）

例如，如果我设置了类似的东西

#container .red { width: 50% }

使用.red更新样式而不使用前面的#container具有较低的特异性。因此，如果他们都修改相同的属性，那么流行率更高的属性将生效。对于媒体查询也是如此。

Answer 2

此处已修复http://jsfiddle.net/w9qLh6tp/1/

 #pagemainwrap {
        margin-left: 170px;
        margin-right: 170px;
        float: left;
        width: 100% !important; // set it highest priority
        border: 3px red solid; // border is set just for demonstration
    }

将宽度设置为100％，优先级（！important）将覆盖任何其他css样式。

Answer 3

好吧，我最后只是重新做了整件事。我仍然不知道它为什么给我这么多麻烦，但它现在有效。

Div没有扩大以填补窗口

3 个答案: