Question

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

以下是一些代码：

<!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 */

Answer 1

div是它们包含的上下文元素宽度的100％，除非你做了一些改变它。

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

所以，#Body是您需要根据需要制作的东西。

Answer 2

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

我注意到的第一件事是#Body只获取内容的宽度，因为宽度设置为自动，这意味着宽度来自单词的大小＆＃34; test＆＃34;而不是它的父容器。

#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%;
}

最后我改变了＃34; auto＆＃34;到＆＃34;继承＆＃34;在这个标签上，以获得其父母的高度：

 .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 */

Answer 3

.BasicBox {
    display:block;
    width: 100%;
}

现在你有padding: 20px。如果你想.BasicBox填充它的容器，填充就会把它扔掉。我会将填充设置为0。

使Div 100％的未知尺寸？

3 个答案: