主要内容侵入我的标题

时间：2016-04-30 13:05:53

标签： css html5 css3

我目前正在学习使用css / html，任何人都可以向我解释为什么页面的主要内容（我尚未打造）会侵入我的标题？代码如下：

    body{
    height: 100%;
    margin: 0;
}

#wrapper {

    width: 95%;
    height: 100%;
    background-color: #bbb;
    padding: 0;
    margin: 0 auto;
    font-family: monospace;
    font-size: 14px;

}

a{
    text-decoration: none;
    color: #000;
}


/*-----------Start Header-----------*/
header{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height: 200px;
    padding: 1%;
    margin: 1%;


}

header>img{

    width: 30%;
    height: 70%;
    float: left;
}
header>h1{

    width: 70%;
    height: 70%;
    float: right;
}


/*----------Start Nav-----------*/

#horznav {
    width: 100%;
    height: 30%;
    display: flex;
    text-align: center;

}
#horznav>a{

    width: 20%;
    margin: 1%;
    padding: 1%;
    border: 1px solid white;
    font-size: 1.75vw;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

}



#horznav>a:hover{

    border-radius: 10px;
    background-color: #fff;
}

/*------------End Nav----------------------*/

/*----------- End Header --------------------*/

这是html：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Project 1</title>
        <link rel="stylesheet" href="Styles/style.css">
        <script src="script.js"></script>



    </head>

    <body>

        <div id="wrapper">

            <header>

                    <img src="http://www.clipartbest.com/cliparts/yik/e79/yike79brT.png" alt="Lorem ipsum dolor sit amet.">

                    <h1>Lorem ipsum dolor sit amet.</h1>

                    <nav id="horznav">

                        <a class= 'navitems nav1' href="">Home</a>
                        <a class= 'navitems nav2' href="">About</a>
                        <a class= 'navitems nav3' href="">Contact</a>
                        <a class= 'navitems nav4' href="">Affiliates</a>
                        <a class= 'navitems nav5' href="">Coming Soon</a>

                    </nav>

            </header>

            <main id="content">

                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>

            </main> 

            <footer>

                <section id="left">

                    <p id="left">Lorem ipsum dolor sit amet, consectetur.</p>
                    <p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur modi, quia consequuntur.</p>

                </section>

                <section id="right">

                    <img src="http://iconion.com/posts/images/social-icons.jpg" alt="Lorem ipsum dolor." id="socialmedia">

                </section>

            </footer>

        </div>

    </body>


</html>

我希望这是一个简单的解决方法，请解释发生这种情况的原因。

谢谢大家。

5 个答案:

答案 0 :(得分：1)

尝试添加overflow：hidden to header。因为您将元素浮动到标题内，所以标题会折叠。添加边框到标题，看看我的意思。如果对元素使用float，则需要溢出：隐藏其父级以防止这种情况发生。

希望有所帮助

答案 1 :(得分：1)

因为您正在应用height，这意味着内部的内容高度超过溢出。请使用min-height，以便在需要时展开。

P.S。你需要编写更可敬的代码。在任何地方使用％都是非常糟糕的做法。

 body{
    height: 100%;
    margin: 0;
}

#wrapper {

    width: 95%;
    height: 100%;
    background-color: #bbb;
    padding: 0;
    margin: 0 auto;
    font-family: monospace;
    font-size: 14px;

}

a{
    text-decoration: none;
    color: #000;
}


/*-----------Start Header-----------*/
header{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    min-height: 200px;
    padding: 1%;
    margin: 1%;


}

header>img{

    width: 30%;
    height: 70%;
    float: left;
}
header>h1{

    width: 70%;
    height: 70%;
    float: right;
}


/*----------Start Nav-----------*/

#horznav {
    width: 100%;
    min-height: 30%;
    display: flex;
    text-align: center;

}
#horznav>a{

    width: 20%;
    margin: 1%;
    padding: 1%;
    border: 1px solid white;
    font-size: 1.75vw;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

}



#horznav>a:hover{

    border-radius: 10px;
    background-color: #fff;
}

/*------------End Nav----------------------*/

/*----------- End Header --------------------*/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div id="wrapper">

            <header>

                    <img src="http://www.clipartbest.com/cliparts/yik/e79/yike79brT.png" alt="Lorem ipsum dolor sit amet.">

                    <h1>Lorem ipsum dolor sit amet.</h1>

                    <nav id="horznav">

                        <a class= 'navitems nav1' href="">Home</a>
                        <a class= 'navitems nav2' href="">About</a>
                        <a class= 'navitems nav3' href="">Contact</a>
                        <a class= 'navitems nav4' href="">Affiliates</a>
                        <a class= 'navitems nav5' href="">Coming Soon</a>

                    </nav>

            </header>

            <main id="content">

                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>

            </main> 

            <footer>

                <section id="left">

                    <p id="left">Lorem ipsum dolor sit amet, consectetur.</p>
                    <p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur modi, quia consequuntur.</p>

                </section>

                <section id="right">

                    <img src="http://iconion.com/posts/images/social-icons.jpg" alt="Lorem ipsum dolor." id="socialmedia">

                </section>

            </footer>

        </div>
</body>
</html>

答案 2 :(得分：1)

您可以在标题中替换高度：

请注意：

header {
  height: 200px;
}

用这个css：

header {
  height: auto;
}

请参阅Fiddle Demo

答案 3 :(得分：1)

在标题元素中使用float会导致其与您的内容一起崩溃。

由于float通常会产生意想不到的结果，因此我建议您使用flexbox，这是一种在大多数浏览器上都可以使用的新布局。这是从MDN中提取的内容的摘要：

  

CSS3 Flexible Box或flexbox是一种布局模式，用于在页面上排列元素，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测。对于许多应用程序，灵活的盒子模型提供了对块模型的改进，因为它不使用浮点数，灵活容器的边距也不会因其内容的边缘而崩溃。

如果您有兴趣使用它 here是MDN的完整教程。

答案 4 :(得分：0)

您已添加

header>h1{

    width: 70%;
    height: 70%;
    float: right;
}

和

header{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height: 200px;
    padding: 1%;
    margin: 1%;


}

因此标题高度为200像素，并且您将h1的高度保持为70％，因此根据您的喜好更改标题＆gt; h1选择器并且它将起作用

希望这有帮助

保重和快乐编码

相关问题
最新问题