Question

我正在尝试创建一个布局，左侧有一个侧边栏，另外还有3个div。但是，我正在通过让我的div适合容器。我也有问题让容器适应页面的宽度而不强制水平滚动

#container{
    position: absolute;
    border: 2px solid red;
    top: 0;
    left: 0;
    height: 100%;
    width: 99%;
    padding: 5px;
    margin: 0;
}

这就是我网站上的样子：

enter image description here

http://jsfiddle.net/rwq3d/

Answer 1

假设我理解正确，你的问题是填充实际上增加了盒子的大小。这意味着如果你给一个100％宽度的盒子并添加1％的填充，你最终会得到102％的盒子宽度（1％左边和1％右边）。在这种情况下的解决方案是简单地将盒子宽度减少到98％，但是使用固定大小的填充，这不是那么容易。

仍然有一个解决方案：box-sizing属性。

使用此代码：

* {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}

更新的代码： http://jsfiddle.net/rwq3d/1/

Answer 2

为什么不使用display: inline-block; 我不确定这是否有用，但这是我的方式：

这是HTML的一部分：

<body>
    <section id="container">
        <section id="sidebar">
            <ul>
                <li id="menuHome"> <a href='index.html'><span>Home</span></a>

                </li>
                <li id="menuUsers"> <a href='#'><span>Users</span></a>

                </li>
                <li id="menuGroups"> <a href='#'><span>Groups</span></a>

                </li>
                <li id="menuSites"> <a href='#'><span>Sites</span></a>

                </li>
                <li id="menuReports"><a href='#'>
                   <span>Reports</span></a>

                </li>
            </ul>
        </section>
        <section id="content">
            <div id="top">orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor nec risus non ullamcorper. Donec porttitor, elit in adipiscing condimentum, neque lectus tristique augue, a euismod metus diam gravida augue. Etiam neque nulla, dapibus a odio semper, tempus volutpat nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut scelerisque nulla vel turpis luctus, sed euismod quam sodales. Mauris sem leo, tincidunt fermentum felis a, sollicitudin commodo justo. Nulla suscipit facilisis dui, eu viverra odio porttitor vel. Integer iaculis sapien posuere, accumsan lectus ac, euismod risus. Nam in mattis sapien. Sed elementum bibendum condimentum. Vestibulum ac lectus id augue vulputate sollicitudin vel quis purus.</div>
            <hr>
            <div id="middle">Aenean elit ligula, luctus id leo auctor, egestas interdum velit. Praesent sit amet consectetur eros, ut adipiscing eros. Praesent convallis arcu a elementum lobortis. Vestibulum magna ante, imperdiet eget porta eu, interdum vel lorem. Morbi mattis quis dui sed porta. Maecenas varius ac augue a viverra. Nunc velit ipsum, mattis facilisis bibendum ac, venenatis vitae odio. Fusce sed interdum ligula, et consequat lorem.</div>
            <hr>
            <div id="bottom">Aliquam rhoncus purus ac lorem suscipit accumsan. Pellentesque elementum volutpat risus, et consequat lectus pulvinar sed. Nullam posuere at metus vel lobortis. Ut facilisis a velit gravida aliquam. Nam aliquet iaculis vulputate. Vestibulum nec eros cursus, dignissim nulla ut, semper tellus. Curabitur ac ultrices sapien. Donec diam sapien, congue ut libero vitae, mollis adipiscing neque. Quisque interdum, eros vitae tempor elementum, quam lacus dapibus erat, at porttitor nisl nunc in massa. Nam ut nulla orci. Etiam vitae accumsan orci. Phasellus libero dui, tincidunt mollis feugiat ac, fermentum sed nulla. Sed lorem turpis, consequat vitae nibh eget, adipiscing placerat arcu. Phasellus libero mi, eleifend eget nulla eget, accumsan imperdiet dui. Morbi pretium dictum est in posuere.</div>
        </section>
    </section>
</body>

对于CSS：

#container {
    border: 2px solid red;
    height: 100%;
    width: 98%;/*A little smaller than the page no no problems arise*/
    padding: 5px;
    margin: 0;
}
#sidebar {
    vertical-align: top;/*We align the element with the top of the 
    elements adjacent to it.*/
    border: 2px solid blue;
    display: inline-block;/*Inline block makes block elements act as if they were inline. It is very useful for these kind of case. And later on if t}you want the page to be responsive*/
    width: 20%;/*You have to set a width for the element*/
    margin-right : 5px;
}
/*The properties for content are similar to those of the sidebar*/
#content {
    width: 75%;
    border: 2px solid gray;
    display: inline-block;
}
/*You don{t really have to make changes in the elements of the content, since they behave as a block should, they sstack one below the other.*/
#top, #middle, #bottom {
    border: 2px solid green;
}

我不太确定这是不是你想要的。希望它有所帮助。

Div不适合容器

2 个答案: