stackoom
  简体   繁体   中英

Top header 100% of screen, but body only 70%?

 原文  2015-06-22 03:25:02  1   1    html/ css

Question

Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work.

Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the text remain in the same place (so aka filling in the sides with the same background colour) But can't even seem to get the header to stretch to 100% no matter what i do.

Please help me! My code for both index.html and stylesheet.css is below:

INDEX.HTML: 

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Computer Company </title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<header class="mainheader">
<nav><ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Solutions & Services</a>
        <ul>
            <li><a href="#">Internet</a></li>
            <li><a href="#">Networking</a></li>
            <li><a href="#">Website</a></li>
            <li><a href="#">Home Computers</a></li>
            <li><a href="#">Servers</a></li>
        </ul>
    </li>
    <li><a href="#">Team</a>
        <ul>
            <li><a href="#">Founder</a></li>
            <li><a href="#">Graphics</a></li>
        </ul></li>
    <li><a href="#">Contact</a></li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>

<body class="body">

<header class="images">
    <img class="first-image" src="images/logo.jpg">
    <img class="second-image" src="images/logo.jpg">
    <img class="third-image" src="images/logo.jpg">
    <img class="fourth-image" src="images/logo.jpg">
    <img class="fifth-image" src="images/logo.jpg">
    <img class="sixth-image" src="images/logo.jpg">
</header>

<div class="maincontent">
    <div class="content">
        <article class="top-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>

        <article class="bottom-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>
    </div>
</div>

<aside class="top-sidebar">
    <article>
        <h2> Latest Updates </h2>
        <div id="twitter-widget-settings">
        <a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by @JoelwMale</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    </article>
</aside>

<footer class="main-footer">
    <p> &copy; 2015 <a href="index.html">Computer Company</a></p>

    <ul>
        <li class="footermedia"><a href="http://www.twitter.com"><img src="images/social/twitter.png"/></a></li>
        <li class="footermedia"><a href="http://www.linkedin.com"><img src="images/social/linkedin.png"/></a></li>
        <li class="footermedia"><a href="http://www.facebook.com"><img src="images/social/facebook.png"/></a></li>
    </ul>
</footer>

CSS 

/*
    Business Website
    Author: Joel Male;
    Date Started: 20/06/2015;
    Date Finished: **;
*/

body {
    background-image: url("images/bg.png");
    color: #000305;
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active {

}

.body {
    margin: 0 auto; /* Centers the page */
    width: 70%;
    clear: both; /* Nothing floats on the page */
}

.companyname {
    width: 0 auto;
    height: 30px;   
    margin-bottom: 5%;
}

.companyname h1 {
    font-size: 60px;
    margin-top: 0;
}

.mainheader img {
    width: 100%;
    height: 300px;
    margin-top: 2%;
}

.mainheader {
    width: 100%;.
    height: 80px;
}

.mainheader nav {
    width: 100%;
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    padding-left: 0px; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
    list-style: none;
    margin: 0 auto;
}

.mainheader nav ul li {
    float: left;
    display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainheader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul li:hover ul {
    display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
}

/* HIDE THE UL */
.mainheader nav ul ul {
    display: none;
    position: absolute;
    background-color: #666;
}

.mainheader nav ul ul li {
    display: block;
    float: none;
    min-width: 178px;
}

.mainheader nav ul ul li:hover {
    background-color: #CF5C3F;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader p {
    float: right;
    margin-top: 10px;
    padding-right: 10px;
    color: #FFF;
}

.mainheader p b {
    text-decoration: underline;
}

.images {
    height: 30%;
    padding-top: 2%;
    display: block;
}

.images .first-image {
    width: 33%;
}

.images .second-image {
    width: 33%;
}

.images .third-image {
    width: 33%;
}

.images .fourth-image {
    width: 33%;
}

.images .fifth-image {
    width: 33%;
}

.images .sixth-image {
    width: 33%;
}

.maincontent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.content {
    width: 70%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
    margin-top: 3px;
    margin-bottom: 3px;
}

.top-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2.8%;
}

.bottom-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 0% 3%;
}

.top-sidebar h2 {
    margin-top: 6px;
    margin-bottom: 6px;
}

.top-sidebar .twitter-timeline {
    height: 796px;
    width: 100%!important;
}

.top-sidebar .twitter-widget-settings {
    height: 600px;
}

.main-footer {
    width: 100%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #666;
    margin: 2%;
}

.main-footer p {
    padding-top: 3px;
    padding-left: 25px;
    float: left;
    width: 40%;
    margin: 10px auto;
    color: #FFF;
}

.main-footer a {
    color: #FFF;
}

.main-footer ul {
    list-style: none;
    margin-top: 2px;
}

.main-footer ul .footermedia {
    float: right;
    padding-right: 5px;
}

.main-footer ul .footermedia img {
    margin-top: 0px;
    width: 40px;
    height: 40px;
}

.main-footer ul .footermedia a {
    padding: 0 0;
    width: 40px;
    height: 40px;
}

.main-footer ul .footer-media a:hover {
    background-color: #666;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
        width: 90%;
        font-size: 95%;
    }

    .mainheader img {
        width: 30%;
    }

    .mainheader nav {
        background: #666;
        height: 200px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainheader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainheader nav li {
        width: 100%;
        margin-left: 0 auto;
    }

    .mainheader nav a:link, .mainheader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainheader nav a:active,
    .mainheader nav .active a:link, .mainheader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainheader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .content {
        width: 100%;
        float: left;
        margin-top: 2%;
    }

    .top-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2%;
    }

    .bottom-content {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 3% 5%;
        margin-top: 2px;
    }
}

Hopefully I formatted everything correctly. Thank you!

1 answers

solution1
 1 ACCPTED  2015-06-22 03:33:34

Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. 

<body>
<header>
<nav><ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Solutions & Services</a>
        <ul>
            <li><a href="#">Internet</a></li>
            <li><a href="#">Networking</a></li>
            <li><a href="#">Website</a></li>
            <li><a href="#">Home Computers</a></li>
            <li><a href="#">Servers</a></li>
        </ul>
    </li>
    <li><a href="#">Team</a>
        <ul>
            <li><a href="#">Founder</a></li>
            <li><a href="#">Graphics</a></li>
        </ul></li>
    <li><a href="#">Contact</a></li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<div class="container">
<div class="images">
    <img class="first-image" src="images/logo.jpg">
    <img class="second-image" src="images/logo.jpg">
    <img class="third-image" src="images/logo.jpg">
    <img class="fourth-image" src="images/logo.jpg">
    <img class="fifth-image" src="images/logo.jpg">
    <img class="sixth-image" src="images/logo.jpg">
</div>

<div class="maincontent">
    <div class="content">
        <article class="top-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>

        <article class="bottom-content">
            <header>
                <h2><a href="#" title="What we do">What we do</a></h2>
            </header>

            <footer>
                <p class="post-info">Posted by Joel</p>
            </footer>

            <content>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </content>
        </article>
    </div>
</div>

<aside class="top-sidebar">
    <article>
        <h2> Latest Updates </h2>
        <div id="twitter-widget-settings">
        <a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by @JoelwMale</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    </article>
</aside>

<footer class="main-footer">
    <p> &copy; 2015 <a href="index.html">Computer Company</a></p>

    <ul>
        <li class="footermedia"><a href="http://www.twitter.com"><img src="images/social/twitter.png"/></a></li>
        <li class="footermedia"><a href="http://www.linkedin.com"><img src="images/social/linkedin.png"/></a></li>
        <li class="footermedia"><a href="http://www.facebook.com"><img src="images/social/facebook.png"/></a></li>
    </ul>
</footer>

</container>
</body>

in CSS 

header{
    width:100%;
}
.container{
    width:70%;
    margin:0 auto;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question My header is wider than the screen despite 100% width and body having 100vw Header not sticking to the top of the screen fixing header to top of screen Header not touching top of screen Stick a header to the top of the screen Body only includes header? HTML CSS height 100% only goes as tall as the screen resolution, not the body height width 100% on top of body requires scrolling The 5 star ranking “width” % from 0 - 100% in CSS only works with the 20/40/60/80/100 but not for example 70% Full screen page with 100% body height
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM