2

我有一个盒子，里面写着“测试”。我想让其包含的 div 的宽度为 100%。我不知道该怎么做？下面的 jsFiddle 显示了我想要做什么。我也不想使用任何 Javascript。

JsFiddle：http: //jsfiddle.net/a6ZCR/3/

这是一些代码：

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
    <link rel="stylesheet" href="Assets/CSS/Global/Global.css" />
</head>
<body>
<div id="Wrapper">
    <div id="Header">
        <div id="HeaderInner">
            <a href="#" class="HeaderLink Main">Link</a>
            <a href="#" class="HeaderLink Main">Link</a>
            <a href="#" class="HeaderLink Main">Link</a>
            <a href="#" class="HeaderLink Main">Link</a>

            <a href="#" class="HeaderLink Side">Log In</a>
            <a href="#" class="HeaderLink Side">Register</a>
        </div>
    </div>

    <div id="Menu">

    </div>

    <div id="Body">
        <div id="BodyPadding">
            <div class="BasicBox">
                Test
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS：

/* Layout */
html, body, #Wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #F4F4F4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#Header {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    min-width: 965px;
    height: 50px;
    background-color: #333;
    z-index: 1000;
}

#HeaderInner {
    display: block;
    width: 965px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
}

#Content {
    position: absolute;
    top: 50px;
    left: 0;
    display: block;
    width: 100%;
    min-width: 965px;
    height: 100%;
}

#Menu {
    position: fixed;
    top: 50px;
    left: 0;
    width: 220px;
    height: auto;
    min-height: 100%;
    background-color: #FFF;
    border-right: 1px solid #DDD;
}

#Body {
    position: absolute;
    top: 50px;
    left: 220px;
    width: auto;
    height: auto;
    min-height: 100%;
}

#BodyPadding {
    padding: 30px;
}
/* Layout End */

/* Links */
.HeaderLink.Main {
    float: left;
    margin: 0;
    padding: 0 35px;
    color: #E1E1E1;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    line-height: 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
}

.HeaderLink.Main:hover {
    color: #FFF;
    border-top: 4px solid #DC3522;
    line-height: 43px;
}

.HeaderLink.Side {
    float: right;
    margin: 0;
    padding: 0 20px;
    color: #E1E1E1;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
}

.HeaderLink.Side:hover {
    color: #FFF;
}
/* Links End */

/* Objects */
.BasicBox {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 20px;
    background-color: #FFF;
    border-bottom: 4px solid #DDD;
}
/* Objects End */
4

3 回答 3

2

divs 是其包含的上下文元素的宽度的 100%，除非你做一些改变它。

您的问题是包含的上下文元素是#Body绝对定位的，这会将其从正常的页面流中删除，并使其仅与其内容一样宽。.BasicBox因此，绝对定位元素上的100% 宽度是自动的 100%。

因此，#Body您需要根据需要制作尽可能宽的东西。

于 2013-05-28T23:45:05.513 回答
1

这是工作小提琴，没​​有设置宽度，只是自动或 100%，纯 CSS。我不必改变太多 http://jsfiddle.net/shayl/a6ZCR/4/

我注意到的第一件事是#Body 仅获取内容的宽度，因为宽度设置为自动，这意味着宽度来自单词“test”的大小，而不是其父容器的大小。

#Body {
    position: absolute;
    top: 50px;
    left: 220px;
    width: auto;
    height: auto;
    min-height: 100%;
}

所以我把它改成宽度 100% 来解决这个问题

#Body {
    position: absolute;
    top: 50px;
    left: 220px;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

然后我对 BodyPadding 做了同样的事情，因为它没有宽度和高度

#BodyPadding {
    padding: 30px;
    width:100%;
    height:100%;
}

最后，我将此标签上的“auto”更改为“inherit”，以从其父母那里获得高度：

 .BasicBox {
    width: inherit;
    height: inherit;
    margin: 0;
    padding: 20px;
    background-color: #FFF;
    border-bottom: 4px solid #DDD;
}

这是所有工作的CSS：

            /* Layout */
             html, body, #Wrapper {
                margin: 0;
                padding: 0;
                width: 100%;
                min-width: 1000px;
                height: 100%;
                background-color: #F4F4F4;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 15px;
            }
            #Header {
                position: fixed;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                min-width: 965px;
                height: 50px;
                background-color: #333;
                z-index: 1000;
            }
            #HeaderInner {
                display: block;
                width: 965px;
                height: 50px;
                margin: 0 auto;
                padding: 0;
            }
            #Content {
                position: absolute;
                top: 50px;
                left: 0;
                display: block;
                width: 100%;
                min-width: 965px;
                height: 100%;
            }
            #Menu {
                position: fixed;
                top: 50px;
                left: 0;
                width: 220px;
                height: auto;
                min-height: 100%;
                background-color: #FFF;
                border-right: 1px solid #DDD;
            }
            #Body {
                position: absolute;
                top: 50px;
                left: 220px;
                width: 100%;
                height: 100%;
                min-height: 100%;
            }
            #BodyPadding {
                padding: 30px;
                width:100%;
                height:100%;
            }
            /* Layout End */

            /* Links */
             .HeaderLink.Main {
                float: left;
                margin: 0;
                padding: 0 35px;
                color: #E1E1E1;
                text-align: center;
                font-weight: bold;
                text-decoration: none;
                line-height: 50px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                transition: color .2s ease-in-out;
                -moz-transition: color .2s ease-in-out;
                -webkit-transition: color .2s ease-in-out;
            }
            .HeaderLink.Main:hover {
                color: #FFF;
                border-top: 4px solid #DC3522;
                line-height: 43px;
            }
            .HeaderLink.Side {
                float: right;
                margin: 0;
                padding: 0 20px;
                color: #E1E1E1;
                text-align: center;
                text-decoration: none;
                line-height: 50px;
                transition: color .2s ease-in-out;
                -moz-transition: color .2s ease-in-out;
                -webkit-transition: color .2s ease-in-out;
            }
            .HeaderLink.Side:hover {
                color: #FFF;
            }
            /* Links End */

            /* Objects */
             .BasicBox {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 20px;
                background-color: #FFF;
                border-bottom: 4px solid #DDD;
            }
            /* Objects End */
于 2013-05-28T23:45:39.377 回答
0 
.BasicBox {
    display:block;
    width: 100%;
}

现在你有padding: 20px. 如果您希望 .BasicBox 填充它的容器，则填充会将其丢弃。我会将填充设置为0.

于 2013-05-28T23:45:01.107 回答