使元素位置固定，而 width = 100% 保持有效

Question

我目前在使用 html 和 css 时遇到问题（两者仍在学习中）。我正在尝试制作一个标准布局，其中 div 中的图像固定在页面顶部，在其下方是水平导航栏、页脚和中间的新闻模块。

这是目前的样子：

http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg

您已经可以看出问题所在（实际上是 2 个）。我无法将列表放置在导航栏图像上，也无法使页脚图像与导航图像一样宽。

这是我的 html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel = "stylesheet" href = "/servis/Stilovi/standardstyle.css">
        <title>Granulo - RE d.o.o</title>
    </head>

    <body>
        <!-- Element koji cini header -->
        <div id = "headers">
            <img id="aparat_slika" src="/servis/Resursi/Slike/aparat_slika.png" alt="Slika nije ucitana">
            <img id="logo_slika" src="/servis/Resursi/Slike/granulo_logo.png" alt="Slika nije ucitana">
            <p id="naziv_firme">GRANULO - RE d.o.o</p>
            <p id="djelatnost_firme" class="djelatnost">Promet, inženjering i servis protivpožarnih uređaja<br>Bojnička 47, Sarajevo</p>
        </div>
        <!-- Element koji cini vertikalni meni -->
        <nav id = "navbar">
            <ul id="lista_meni">
                <li ><a class="djelatnost" href="#">Link 1</a></li>
                <li ><a class="djelatnost" href="#">Link 2</a></li>
                <li ><a class="djelatnost" href="#">Link 3</a></li>
                <li ><a class="djelatnost" href="#">Link 4</a></li>
                <li ><a class="djelatnost" href="#">Link 5</a></li>
            </ul>
            <img id="navbar_bg" src="/servis/Resursi/Slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </nav>
        <!-- Element u kojem se nalaze novosti -->
        <div id = "news"></div>
        <!-- Element koji cini footer -->
        <div id = "footers">
            <img id="footer_image" src="/servis/Resursi/slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </div>
    </body>


</html>

还有我的css：

@import url(http://fonts.googleapis.com/css?family=Roboto:700);
body{
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
}

ul{
    list-style-type: none;
}

/* images */
#aparat_slika{
    float:right;
}

#logo_slika{
    float:left;
}

#navbar_bg{
    width: 100%;
    margin: 0;
    padding: 0;
}

#footer_image{
    width: 100%;
}

/* div style */
#headers{
    background-color: #e6e1e1;
    width: 100%;
    float: right;
    border: 1px solid black;
}

#naziv_firme{
    font-family: 'Roboto', bold;
    font-size: 30pt;
    float: top;
    margin-top: 10px;
}

#navbar{
    width: 100%;
    border: solid 1px black;
    float: right;
    padding: 0;
    text-align: center;
}

#navbar ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar ul li{
    margin: 0;
    padding: 50px;
    display: inline;
}
#navbar  a:visited{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:active{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:hover{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
    background-color: #227755;
}

#footers{
    position: fixed;
    bottom: 0;
    width: 100%;
    border: solid 1px black;
}

#news{
    border:solid 1px black;
}

/* Klasa za male natpise za firme */
.djelatnost{
    font-family: 'Roboto', italic;
    font-size: 10pt;
    float:top;
    margin-top: -40px;
    color: black;
}

.linkSize{
    height: 120px;
}

Answer 1

首先，我建议将您的代码包装在包装器内，而不是为您的实际 body 留出余量，像这样

<div class="container">
    <div id = "headers">...</div>
    <nav id = "navbar">...</div>
    <div id = "news">...</div>
    <div id = "footers">...</div>
</div>

CSS

body{
    background-color: white;
}
.container{
    width:1000px;
    margin: 0 auto;
}

2nd 你的页脚是 position:fixed; 所以它不会服从任何容器宽度，在这种情况下它不会服从 body 的 margin-right:10%;，你可以修复它有一个像这样的小技巧：

#footers {
    position: fixed;
    bottom: 0;
    left: 50%; /* tells your footer to be horizontally centered */
    margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
    width: 1000px;
    border: solid 1px black;
}

最后，为了使您的 navbar/links 位于 header 图像之上，将 position: absolute; 添加到 class .navbar

这是一个online example。我没有像您所说的那样将它包含在 header 图片上的链接中，但是 position: absolute; 是实现它的方法，您只需要尝试一下即可。
要解决 .navbar 由于这个新的 position:absolute; 将 .navbar 包装在新的 div 内而导致容器脱离的问题，甚至更好地包装属于您的所有内容header 在新的 div class 上添加到这个新的 class 标签 position: relative;

使元素位置固定，而 width = 100% 保持有效

Make element position fixed while width = 100% stays valid

html

css

web