CSS

Question

又是我... 还有一个问题...

我的问题是 Body 高于 Header，但它应该在一条直线上。它从左边开始，但它应该从导航栏开始的地方开始，其他 2 个 Div 应该在导航栏结束的地方结束。

body {
 background: black;
 font-family: Oswald;
 font-size: 20px;
 font-weight: normal;
 line-height: 1;
 margin: 0;
 min-width: 960px;
 padding: 0;
}
a {
 text-decoration: none;
 outline: none;
}
a:active {
 background: none;
}
img {
 border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
h1 {
    text-align: left;
    font-family: Oswald DemiBold;
    font-size: 24px;
    color: #A40900;
    text-transform: uppercase;
}
h2 {
    text-align: left;
    font-family: Oswald DemiBold;
    font-size: 24px;
    color: white;
    text-transform: uppercase;
}
p {
 color: #252525;
 line-height: 20px;
 margin: 0;
 padding: 0;
    text-align: left;
}
p a {
 color: #252525;
 text-decoration: underline;
}
.border-right { 
    border-right: 5px solid #A40900;
    padding-right: 1px;
    
}
.border-left {
    border-left: 5px solid #A40900;
    padding-left: 1px;
}
#header {
    margin: 0 auto;
    padding: 4px 0 0px;
    text-align: center;
    width: 960px;
}
#header a.logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 540px;
}
#header a.logo img {
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
#header ul {
    margin: 0;
    padding: 0;
    background-color: white;
    border-top: 5px solid #A40900;
    border-bottom: 5px solid #A40900;
    padding: 10px 0;
}
#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0 10px;
    text-align: center;
}
#header ul li a {
    color: #000;
    font-family: Oswald ExtraLight;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
    color: #0ba39c;
}
#body {
    margin: 0;
    padding: 0 0 30px;
    text-align: center;
}
#body #welcome {
    margin: 5%;
    padding: 15px;
    position: relative;
    width: 35%;
    float: left;
    background-color: white;
    display: inline;
}
#body #navihelp {
    float: left;
    margin: 5%;
    padding: 15px;
    position: relative;
    background-color: #A40900;
    display: inline-block;
    width: 35%;
}
#body #contact {
    background-color: #A40900;
    float: left;
    width: 35%;
    padding: 15px;
    margin: 5%;
    display:inline-block; 
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Willkommen beim Phönix-Brandschutz</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
 <div id="header">
        <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
  <ul id="navigation">
            <span id="mobile-navigation">&nbsp;</span>
   <li class="selected border-right">
    <a href="index.html">Startseite</a>
   </li>
   <li class="border-right">
    <a href="about.html">Über uns</a>
   </li>
   <li class="border-right">
    <a href="anfahrt.html">Anfahrt</a>
   </li>
            <li class="border-right">
                <a href="leistungen.html">Leistungen</a>
            </li>
            <li class="border-right">
                <a href="anfrage.html">Kontaktanfrage</a>
            </li>
            <li>
                <a href="allgemein.html">Allgemeine Informationen</a>
            </li >
            <li class="border-left">
                <a href="impressum.html">Impressum</a>
            </li>
  </ul>
 </div>
    <div id="body">
        <div id="welcome">
            <h1>Herzlich Willkommen</h1>
            <p>
            abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest re nis id quam inusda sitatibus utas ad quias que inimus eaque parum fugitio beati repedit pe veliquat rendebis aturit quibuscipsae perferro omnissi dolenime porum ari re numquae si aliquia dolum ipsa doloritat.
Dam eate nusto dolut haris dolupta tumquo ommodit ium doluptas quo tem faceprem exerferspis destiam, ipsunte solorio vellaboribus dolorerspe nonsequ odisit etur rernam nus dolor aut odi natius delestore dolupti oressimus ex eicipsumque odit et animus, quassunt, offici volut molor anda samenitem la vero doluptat.
Exped et alibus, coria ped magnia el inus mi, officiisqui dus eiusament omnihilit vellorrum iderrum rati aciisquid magnim con nost que dipiet quo consequas dolum volende bitatis ratio explic tem hariant et, senet ea que namus resendae si officipicil estia volupta turem. Musam, verchitem reicium et, volupta tibusam vendi nem. Ut aspedita quist, ut quos ra quuntur? Ebis antum ut eatemoluptat ommolupti conse comnimagnat fuga. Untis distrupta dolendi omnihit
            </p>
        </div>
        <div id="navihelp">
            <h2>Navigation</h2>
            <p> abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest.
            </p>
        </div>
        <div id="contact">
            <h2>Unsere Kontaktdaten:</h2>
            <p>abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remol)</p>
        </div>
    </div>
</body>
</html>

它应该是这样的： Screendesign Body

希望你能帮助我

Answer 1

我快拿到了，但还缺少两件东西

我要左边和右边2个一样高
当 Window 小于网站时，白框位于 "touching" 浏览器底部，但我想要黑色 space 在浏览器和白框之间（也许当我得到相同高度的 bot boxx 时，这个问题就会解决）

body {
 background: black;
 font-family: Oswald;
 font-size: 20px;
 font-weight: normal;
 line-height: 1;
 margin: 0;
 min-width: 960px;
 padding: 0;
}
a {
 text-decoration: none;
 outline: none;
}
a:active {
 background: none;
}
img {
 border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
h1 {
    text-align: left;
    font-family: Oswald DemiBold;
    font-size: 24px;
    color: #A40900;
    text-transform: uppercase;
}
h2 {
    text-align: left;
    font-family: Oswald DemiBold;
    font-size: 24px;
    color: white;
    text-transform: uppercase;
}
p {
 color: #252525;
 line-height: 20px;
 margin: 0;
 padding: 0;
    text-align: left;
}
p a {
 color: #252525;
 text-decoration: underline;
}
p2 {
    color: #B3B3B3;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.border-right { 
    border-right: 5px solid #A40900;
    padding-right: 1px;
    
}
.border-left {
    border-left: 5px solid #A40900;
    padding-left: 1px;
}
#header {
    margin: 0 auto;
    padding: 4px 0 0px;
    text-align: center;
    width: 960px;
}
#header a.logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 540px;
}
#header a.logo img {
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
#header ul {
    margin: 0;
    padding: 0;
    background-color: white;
    border-top: 5px solid #A40900;
    border-bottom: 5px solid #A40900;
    padding: 10px 0;
}
#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0 10px;
    text-align: center;
}
#header ul li a {
    color: #000;
    font-family: Oswald ExtraLight;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
    color: #0ba39c;
}
#body {
    margin: 0 auto;
    padding: 4px 0 0px;
    text-align: center;
    width: 960px;
    height: auto;
    font-size: 14px;
}
#body #welcome {
    margin-top: 5%;
    padding: 15px;
    position: relative;
    width: 45%;
    height: 100%;
    float: left;
    background-color: white;
    display: inline;
}
#body #navihelp {
    float: right;
    margin-top: 5%;
    padding: 15px;
    position: relative;
    background-color: #A40900;
    display: inline-block;
    width: 45%;
    text-align: left;
}
#body #contact {
    background-color: #A40900;
    float: right;
    width: 45%;
    padding: 15px;
    margin-top: 5%;
    display:inline-block;
    text-align: left;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Willkommen beim Phönix-Brandschutz</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
 <div id="header">
        <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
  <ul id="navigation">
            <span id="mobile-navigation">&nbsp;</span>
   <li class="selected border-right">
    <a href="index.html">Startseite</a>
   </li>
   <li class="border-right">
    <a href="about.html">Über uns</a>
   </li>
   <li class="border-right">
    <a href="anfahrt.html">Anfahrt</a>
   </li>
            <li class="border-right">
                <a href="leistungen.html">Leistungen</a>
            </li>
            <li class="border-right">
                <a href="anfrage.html">Kontaktanfrage</a>
            </li>
            <li>
                <a href="allgemein.html">Allgemeine Informationen</a>
            </li >
            <li class="border-left">
                <a href="impressum.html">Impressum</a>
            </li>
  </ul>
 </div>
    <div id="body">
        <div id="welcome">
            <h1>Herzlich Willkommen</h1>
            <p>
            abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest re nis id quam inusda sitatibus utas ad quias que inimus eaque parum fugitio beati repedit pe veliquat rendebis aturit quibuscipsae perferro omnissi dolenime porum ari re numquae si aliquia dolum ipsa doloritat.
            Dam eate nusto dolut haris dolupta tumquo ommodit ium doluptas quo tem faceprem exerferspis destiam, ipsunte solorio vellaboribus dolorerspe nonsequ odisit etur rernam nus dolor aut odi natius delestore dolupti oressimus ex eicipsumque odit et animus, quassunt, offici volut molor anda samenitem la vero doluptat.
            Exped et alibus, coria ped magnia el inus mi, officiisqui dus eiusament omnihilit vellorrum iderrum rati aciisquid magnim con nost que dipiet quo consequas dolum volende bitatis ratio explic tem hariant et, senet ea que namus resendae si officipicil estia volupta turem. Musam, verchitem reicium et, volupta tibusam vendi nem. Ut aspedita quist, ut quos ra quuntur? Ebis antum ut eatemoluptat ommolupti conse comnimagnat fuga. Untis distrupta dolendi omnihit
            </p>
        </div>
        <div id="navihelp">
            <h2>Navigation</h2>
            <p2> abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest.
            </p2>
        </div>
        <div id="contact">
            <h2>Unsere Kontaktdaten:</h2>
            <p2>abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remol)</p2>
        </div>
    </div>
</body>
</html>

Answer 2

修复#2：只需将 margin-bottom: 5%; 添加到 #body #welcome.

关于 #1 - 请解释一下，因为我不清楚你想要得到什么（示意图截图就可以）。

CSS | Body 不适合 Header

CSS | Body doesnt fit to Header

html

floating

document-body

navigationbar