0

我正在尝试创建一个布局，左侧有一个侧边栏，3 个 div 堆叠在一起。但是，我必须让我的 div 适合容器。我在不强制水平滚动的情况下让容器适应页面宽度时也遇到问题

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

这是它在我的网站上的样子：

在此处输入图像描述

http://jsfiddle.net/rwq3d/

4

2 回答 2

0

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

不过，有一个解决方案：box-sizing属性。

使用此代码：

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

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

于 2013-11-12T15:42:09.467 回答
0

你为什么不使用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;
}

我不太确定这是否是您正在寻找的。希望能帮助到你。

于 2013-11-12T17:29:37.447 回答