Question

我的主体div上有白色背景问题。我必须指定一个固定的px，这是750px。我不想这样做我想只能使用auto。这是因为我需要为其他页面使用相同的CSS文件，它们将是不同的高度。此外，当在manibody div上使用height：auto的值时，它会覆盖该div中的所有内容。

这是一个链接，可以看到它的内容http://jsfiddle.net/#&togetherjs=KksjUfFlxS

请帮助我解决这个问题。

这是我的HTML代码：

<!doctype html>
<head>
<meta charset="UTF-8">

<title>Home || Web Design Coursework</title>

<meta name="description" content="">

<meta name="author" content="Elliott Davidson">

<meta name="language" content="english">

<link rel="shortcut icon" href="images/favicon.ico">

<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">

</head>

<body>

<div id="container">

    <!-- start of header -->

    <div id="header">

        <img src="images/header-image.png" width="980" height="170" alt="kayaking header logo" /> </div>

    </div><!-- end of header -->

    <!-- start of navigation bar -->

    <div id="navmenu">

        <ul id="list-nav">

            <li id="topnavleft"><a href="index.html">Home</a></li>

            <li><a href="design.html">Design</a></li>

            <li><a href="about.html">About</a></li>

            <li><a href="kayaking-di">Kayaking Disciplines</a></li>

            <li id="topnavright"><a href="links.html">Useful links</a></li>

        </ul><!-- ul end list-nav -->

    </div><!-- div end navmenu -->

    <div id="mainbody">

        <div id="homepagevideo">

            <iframe width="560" height="315" src="http://www.youtube.com/embed/3WabVsBugGQ?rel=0" frameborder="0" allowfullscreen></iframe>

        </div><!-- end div homepagevideo -->

        <div id="homepagekayakingdisciplines">

            <h1 id="homepageh1kayakingdiscipline">Kayaking Disciplines</h1>

            <p>Aliquid delicatissimi et vix. Ut cum tation ridens. Mea ei impetus gubergren, sit natum doming quodsi et. Usu cu sonet debitis. Mea nullam tamquam ea. Ex vis vocibus splendide, ut eum ullum assum impedit.</p>

            <p>Decore facete mei ei. Eam ea maluisset dissentias, graece labore ocurreret has eu. Cu usu quem officiis maiestatis, cu quis assueverit mea. Primis deserunt consectetuer quo et, vim numquam aliquam eruditi ut.</p>

            <p>Sint erroribus imperdiet ex quo, et sit habeo dolorum molestiae, commodo dissentiet no duo. Mucius essent repudiare te pri, te tale accumsan reprimique pro. Mel cu ignota argumentum. Vis dolor efficiantur ex, ei mei reque oporteat percipitur. Sea corrumpit voluptaria referrentur ea, ei sensibus definitionem vel. No verterem elaboraret sit, velit apeirian vim ea.</p>

        </div><!-- end div homepagekayakingdisciplines -->

        <div id="homepagedesign">

            <h2>Design</h2>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis. Eum dicant mollis denique cu, an fastidii ocurreret instructior sit. His discere mediocrem no, an sit recteque tincidunt.</p>

<p>Mea ea animal inciderint, cum nulla saepe libris an. Modo meliore argumentum vel ei, mei cu option facilisis. Et enim detraxit vix. In clita mollis feugiat quo. Nobis soluta pri te, cum brute latine cotidieque ei.</p>

        </div><!-- end div homepagedesign -->

        <div id="homepageaboutme">

            <h3>About</h3>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>

        </div><!-- end div homepageaboutme -->

        <div id="homepagelinks">

            <h3>Links</h3>

            <p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>

        </div><!-- end div homepagelinks -->

    </div><!-- end div mainbody -->

    <div id="footer">

        <div id="footerimage">

            <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />

            <div id="footertext"> 

                <div id="footernavmenu">

                    <ul id="list-footer-nav">

                        <li><a href="index.html">Home</a></li>

                        <li><a href="design.html">Design</a></li>

                        <li><a href="about.html">About</a></li>

                        <li><a href="kayaking-di">kayaking Disciplines</a></li>

                        <li><a href="links.html">Useful links</a></li>

                    </ul><!-- ul end list-footer-nav -->

                </div><!-- div end footernavmenu -->

                <div id="copyright">

                    <div class="copyrigttext">

                        Copyright © 2013 Elliott Davidson, All Rights Reserved.

                    </div><!-- end div copyrighttext -->

                </div><!-- end div copyright -->

            </div><!-- end div footertext -->          

        </div><!-- footer image --> 

    </div><!-- end of footer -->

</div><!-- end of container -->

</body>
</html>

这是我的CSS代码：

@charset "UTF-8";
/* CSS Document */

#html, body{
    background-color : #32B7FF;
    font-family: Tahoma;
}

#container {
    margin-left : auto;
    margin-right : auto;
    width:980px;
    height:auto;
}

/********************************** header **********************************/


/********************************** nav bar **********************************/

#navmenu {
    width : 980px;
    margin-left : auto;
    margin-right : auto;
    height: 33px;
}

ul#list-nav {
    list-style : none;
    padding : 0;
    background-color : #32B7FF;
    font-family:Tahoma, Geneva, sans-serif;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}

ul#list-nav li {
    display : inline;
    width : 980px;
    height : 33px;
}

ul#list-nav li a {
    text-decoration : none;
    padding : 8px 0;
    width : 196px;
    background : #1173A8;
    color : #fff;
    float : left;
    text-align : center;
}

ul#list-nav li a:hover {
    background : #4B98C1;
}

ul#list-nav li a:active {
    background : #4B98C1;
}

ul#list-nav li:first-child, ul#list-nav li:last-child {
   border-radius:10px;
}

/********************************** mainbody **********************************/

#mainbody {
    background-color:#FFF;
    width:980px;
    height:750px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-19px;
}

#homepagevideo {
    padding:10px;
    width:auto;
    height:auto;
    float:left;
}

#homepageh1kayakingdiscipline {
    padding-top:5px;
}

#homepagekayakingdisciplines {
    text-align:justify;
    padding-left:10px;
    padding-right:10px;
}

#homepagedesign {
    width:470px;
    padding-left:10px;
    padding-bottom:10px;
    padding-right:10px;
    float:left;
    height:auto;

}

#homepageaboutme {
    width:470px;
    padding-left:10px;
    padding-top:10px;
    padding-right:10px;
    float:right;
    height:auto;

}

#homepagelinks {
    width:470px;
    padding-left:10px;
    padding-bottom:10px;
    padding-right:10px;
    float:right;
    height:auto;
}

/********************************** footer **********************************/

#footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:absolute;
    width:980px;
    height:auto;
    bottom: 0
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
    position: relative;
}

#footernavmenu {
    width : 540px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}



ul#list-footer-nav li {
    display : inline;
    padding-right: 8px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
    color:#FFF;
    padding:6px;
}

ul#list-footer-nav li a:hover {
    color:#4B98C1;
}

ul#list-footer-nav li a:active {
    color:#4B98C1;
}

#copyright {
    width:440px;
    height:auto;
    right:0;
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: right;
    color:#FFF;
}

.copyrighttext {

}

Answer 1

您只需向overflow:auto;添加#mainbody即可。多数民众赞成。

#mainbody {
    background-color:#FFF;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-19px;
    overflow:auto; /* Use THIS one */
}

<强> WORKING DEMO

Answer 2

你可以通过在关闭mainbody div之前添加这样的清除来完成此操作，就像这样

<强> HTML

<div class="clear"></div>

<强> CSS：

.clear {
clear:both;
}

css背景颜色格式问题

2 个答案: