Question

请查看我的HTML和CSS！问题在下面描述。

HTML：

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets.css" />
<link href='http://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>        
<body>
    <div id='wrapper1'>
        <div class="wing"></div>
        <div id="wrapper2">
            <div id="header">
                <div class="headerdropdown">Item1</div>
                <div class="headerdropdown">Item2</div>
                <div class="headerdropdown">Item3</div>
                <div class="headerdropdown">Item4</div>
                <div class="headerdropdown">Item5</div>
            </div>
            <div id="field"></div>
            <div id="footer"></div> 
        </div>
        <div class="wing"></div>
    </div> 
</body>
</html>

CSS：

html, body{
    padding:0px, 0px, 0px, 0px;
    margin:0px;
}
body{
    background-image:url(1919191D1D1D00000019192E_138.png)
    }
#wrapper1{
position:relative;
margin:auto;
width:80%;
background-color:teal;
}
#wrapper2{
    position: relative;
    float:left;
    width: 90%;
    height: 1280px;
}
#header {   
    position: fixed;
    height: 50px;
    width:100%;
    background-color:#000040;
    z-index:2;
}
#field {
    background-color: #4AB7FF;
    float: left;
    top: 50px;
    height:1250px;
    width:100%;
}
#footer {
    height: 30px;
    width: 100%;
    background-color: #000032;
    position:fixed;
    bottom:0px;
    z-imdex:2;
}
.wing{
position:relative;
width:5%;
height:1280px;
float:left;
background-color:black;
opacity:0.5;
}
.headerdropdown{
    height:30px
    z-index:2;
    background-color: #000040   ;
    color: white;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    float: left;
    height: 30px;
    font-size: 20px;
    position: relative;
    font-weight: 400;
}
.headerdropdown:hover{
    background-color:#000040;
    text-shadow:0px 0px 50px white, 0px 0px 3px white,0px 0px 10px black;
}

为什么深蓝色的#header和#footer不占用＃wrapper2的宽度？

这些元素的宽度设置为100％，所以（据我所知），它们应该取其父元素的宽度，wrapper2，并在右边的暗半透明块附近结束。我究竟做错了什么？ “子”元素的宽度如何依赖于“父”div？

Answer 1

#header和#footer将position设置为fixed，使其与浏览器窗口相关，而不是#wrapper2。

Answer 2

我建议你做的是将父级更改为position:absolute;，将子级更改为position:relative;并继续从那里开始..

http://jsfiddle.net/DHdpH/

祝你好运。

<div> </div>的意外宽度

2 个答案: