div內容不擴展

Question

基本上，在＃main-content div中，我希望它進行擴展，因此該div的實際內容適合內部並且不會重疊，就像在Codepen中看到的那樣。

我不知道如何實現clearfix解決方案或overflow：hidden解決方案。 我已經嘗試過但是失敗了。

我不知道為什么，但是p標簽沒有重疊，但是JavaScript / jQuery進度條是重疊的。 ：/

Codepen： http ：//codepen.io/DocRow10/pen/hjIkq

片段：

 body { margin: 0; } #nav-bar { width: 100%; height: 50px; background-color: rgb(40, 40, 40); border-bottom-style: solid; border-bottom-color: rgb(238, 0, 0); border-bottom-width: 7.5px; padding-top: 14px } #logo { position: relative; bottom: 5px; font-size: 30px; padding-left: 8px; float: left; font-family: bebas; } #word-1 { color: rgb(0, 154, 205); } #word-2 { color: rgb(255, 250, 250); } ul#main-links { list-style: none; margin: 0; padding-right: 50px; float: right; height: 100%; border-bottom: 7.5px solid transparent; display: block; font-size: 0; } ul#main-links li { display: inline-block; text-align: center; border-bottom-style: solid; border-bottom-width: 7.5px; border-bottom-color: rgb(238, 0, 0); color: white; font-family: arcon; font-size: 18px; height: 100%; width: 90px; position: relative; z-index: 2; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: white; } a:active { text-decoration: none; color: white; } a#logo-link { text-decoration: none; } a#logo-link:visited { text-decoration: none; color: inherit; } a#logo-link:active { text-decoration: none; color: inherit; } ul#main-links > a > li > span.word-position { position: relative; top: 5px; } #main-content { background-color: rgb(131, 111, 255); width: 100%; height: 80%; } #background { } h1#page-header { margin: 0; font-family: code; font-size: 45px; text-align: center; padding: 5px 0px; } /* ABOUT */ #pic-container { width: 100%; height: 180px; text-align: center; padding-top: 10px; } #relative { position: relative; display: inline-block; right: 97.5px; } #photo-frame { background-color: royalblue; position: absolute; width: 0px; height: 0px; border-radius: 100px; border-style: solid; border-color: beige; border-width: 0px; top: 90px; left: 90px; } #photo-frame > #picture { width: 100%; height: 100%; background-image: url('Ed.png'); border-radius: 100px; } hr { position: relative; top: 97.5px; margin: 0; border-style: solid; border-color: black; overflow: hidden; height 2px; background-color: black; } .hidari { float: left; } .migi { float: right; } .clear { width: 100%; clear: both; height: 0px; line-height:0px; } #intro { width: 70%; font-family: lato; margin-left: auto; margin-right: auto; text-align: justify; font-size: 17px; line-height: 150%; } #expertise { width: 80%; margin-left: auto; margin-right: auto; text-align: center; } #expertise h1 { font-family: Arial; font-size: 25px; } #expertise h2 { font-family: sinkinsans; font-size: 18px; margin-top: 5px; } #skills { width: 50%; height: 100px; } .skill { } /*-----SKILLS BAR-----*/ .bar { width: 300px; height: 35px; border: 2px solid black; border-radius: 10px; overflow: hidden; } .nil { background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } ability { width: 77%; height: 100%; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , lime); /* Standard syntax */ border-bottom-right-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 7.5px; border-top-left-radius: 7.5px; /* border-radius: 7.5px; */ } /*--------------------*/ #experience { width: 50%; height: 100px; } /*---------------------------------------------------------------*/ /* CONTACT */ #contact-info { margin-left: auto; margin-right: auto; width: 80%; height: 80%; } #contact-info td { margin-left: auto; margin-right: auto; width: 50%; } #contact-info td > p { text-align: justify; font-family: lato; width: 80%; } .spacer { padding: 10px 0px; } #message-div { height: 150px; } input[type="text"] { width: 100%; height: 27px; padding-left: 5px; font-family: Verdana,Geneva,sans-serif; font-size: 15px; } input[type="text"]:hover, #recipient-message:hover { border-width: 1.5px; border-style: solid; border-color: rgb(152, 245, 255); } input[type="button"] { float: right; margin-top: 7.5px; background-color: rgb(72, 118, 215); border-color: rgb(72, 118, 215); border-radius: 5px; font-size: 15px; color: rgb(230, 230, 255); font-family: Tahoma; } label { font-family: lato; font-size: 18px; } #recipient-message { width: 100%; height: 100%; resize: none; font-family: Verdana,Geneva,sans-serif; font-size: 12.5px; } .form-confirmation { width: 80%; border-style: solid; border-width: 2.5px; border-radius: 5px; border-color: rgb(0, 0, 0); } .invalid-field { box-shadow: 0 0 23px red; -webkit-box-shadow: 0 0 23px red; -moz-box-shadow: 0 0 23px red; } #success { background-color: rgb(0, 210, 0); color: rgb(245, 255, 250); } #failure { background-color: rgb(255, 48, 48); color: rgb(137, 0, 0); } .form-confirmation > p { text-align: center; font-family: codee; font-size: 18px; } #footer { width: 100%; height: 10%; background-color: black; } #footer > p#footer-text { margin: 0; text-align: center; font-family: arial; color: rgb(169, 169, 169); padding-top: 20px; width: 100%; } @font-face { font-family: arcon; src: url(Arcon-Regular.otf); } @font-face { font-family: bebas; src: url(BEBAS___.ttf); } @font-face { font-family: bubblegum; src: url(BubblegumSans-Regular.otf); } @font-face { font-family: code; src: url(Days.otf); } @font-face { font-family: lato; src: url(Lato-Regular.ttf); } @font-face { font-family: codee; src: url(CODE_Bold.otf); } @font-face { font-family: sinkinsans; src: url(SinkinSans-400Regular.otf); } .clear { clear: both; } 

 <div id="container"> <div id="nav-bar"> <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div> <ul id="main-links"> <a href="about.html"><li><span class="word-position">About</span></li></a> <a href="work.html"><li><span class="word-position">Work</span></li></a> <a class href="contact.php"><li><span class="word-position">Contact</span></li></a> </ul> </div> <div id="main-content"> <div id="pic-container"> <div id="relative"> <div id="photo-frame"> <div id="picture"></div> </div> </div> <hr class="hidari" /> <hr class="migi" /> </div> <h1 id="page-header">About Me</h1> <p id="intro">Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! </p> <div id="expertise"> <div id="skills" class="hidari"> <h1>Skills</h1> <div class="skill"> <h2>HTML/CSS</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> </div> <div id="experience" class="migi"> <h1>Experience</h1> </div> <span class="clear"></span> </div> </div> <span class="clear"></span> <div id="footer"> <p id="footer-text"> &#169; 2016. All rights reserved. </p> </div> </div> 

Answer 1

 body { margin: 0; } #nav-bar { width: 100%; height: 50px; background-color: rgb(40, 40, 40); border-bottom-style: solid; border-bottom-color: rgb(238, 0, 0); border-bottom-width: 7.5px; padding-top: 14px } #logo { position: relative; bottom: 5px; font-size: 30px; padding-left: 8px; float: left; font-family: bebas; } #word-1 { color: rgb(0, 154, 205); } #word-2 { color: rgb(255, 250, 250); } ul#main-links { list-style: none; margin: 0; padding-right: 50px; float: right; height: 100%; border-bottom: 7.5px solid transparent; display: block; font-size: 0; } ul#main-links li { display: inline-block; text-align: center; border-bottom-style: solid; border-bottom-width: 7.5px; border-bottom-color: rgb(238, 0, 0); color: white; font-family: arcon; font-size: 18px; height: 100%; width: 90px; position: relative; z-index: 2; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: white; } a:active { text-decoration: none; color: white; } a#logo-link { text-decoration: none; } a#logo-link:visited { text-decoration: none; color: inherit; } a#logo-link:active { text-decoration: none; color: inherit; } ul#main-links > a > li > span.word-position { position: relative; top: 5px; } #main-content { background-color: rgb(131, 111, 255); width: 100%; } #background { } h1#page-header { margin: 0; font-family: code; font-size: 45px; text-align: center; padding: 5px 0px; } /* ABOUT */ #pic-container { width: 100%; height: 180px; text-align: center; padding-top: 10px; } #relative { position: relative; display: inline-block; right: 97.5px; } #photo-frame { background-color: royalblue; position: absolute; width: 0px; height: 0px; border-radius: 100px; border-style: solid; border-color: beige; border-width: 0px; top: 90px; left: 90px; } #photo-frame > #picture { width: 100%; height: 100%; background-image: url('Ed.png'); border-radius: 100px; } hr { position: relative; top: 97.5px; margin: 0; border-style: solid; border-color: black; overflow: hidden; height 2px; background-color: black; } .hidari { float: left; } .migi { float: right; } .clear { clear: both; } #intro { width: 70%; font-family: lato; margin-left: auto; margin-right: auto; text-align: justify; font-size: 17px; line-height: 150%; } #expertise { width: 80%; margin-left: auto; margin-right: auto; text-align: center; } #expertise h1 { font-family: Arial; font-size: 25px; } #expertise h2 { font-family: sinkinsans; font-size: 18px; margin-top: 5px; } #skills { width: 50%; overflow: auto; } .skill { } /*-----SKILLS BAR-----*/ .bar { width: 300px; height: 35px; border: 2px solid black; border-radius: 10px; overflow: hidden; } .nil { background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } .ability { width: 77%; height: 100%; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , lime); /* Standard syntax */ border-bottom-right-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 7.5px; border-top-left-radius: 7.5px; /* border-radius: 7.5px; */ } /*--------------------*/ #experience { width: 50%; } /*---------------------------------------------------------------*/ /* CONTACT */ #contact-info { margin-left: auto; margin-right: auto; width: 80%; height: 80%; } #contact-info td { margin-left: auto; margin-right: auto; width: 50%; } #contact-info td > p { text-align: justify; font-family: lato; width: 80%; } .spacer { padding: 10px 0px; } #message-div { height: 150px; } input[type="text"] { width: 100%; height: 27px; padding-left: 5px; font-family: Verdana,Geneva,sans-serif; font-size: 15px; } input[type="text"]:hover, #recipient-message:hover { border-width: 1.5px; border-style: solid; border-color: rgb(152, 245, 255); } input[type="button"] { float: right; margin-top: 7.5px; background-color: rgb(72, 118, 215); border-color: rgb(72, 118, 215); border-radius: 5px; font-size: 15px; color: rgb(230, 230, 255); font-family: Tahoma; } label { font-family: lato; font-size: 18px; } #recipient-message { width: 100%; height: 100%; resize: none; font-family: Verdana,Geneva,sans-serif; font-size: 12.5px; } .form-confirmation { width: 80%; border-style: solid; border-width: 2.5px; border-radius: 5px; border-color: rgb(0, 0, 0); } .invalid-field { box-shadow: 0 0 23px red; -webkit-box-shadow: 0 0 23px red; -moz-box-shadow: 0 0 23px red; } #success { background-color: rgb(0, 210, 0); color: rgb(245, 255, 250); } #failure { background-color: rgb(255, 48, 48); color: rgb(137, 0, 0); } .form-confirmation > p { text-align: center; font-family: codee; font-size: 18px; } #footer { width: 100%; background-color: black; } #footer > p#footer-text { margin: 0; text-align: center; font-family: arial; color: rgb(169, 169, 169); padding: 20px; width: 100%; } @font-face { font-family: arcon; src: url(Arcon-Regular.otf); } @font-face { font-family: bebas; src: url(BEBAS___.ttf); } @font-face { font-family: bubblegum; src: url(BubblegumSans-Regular.otf); } @font-face { font-family: code; src: url(Days.otf); } @font-face { font-family: lato; src: url(Lato-Regular.ttf); } @font-face { font-family: codee; src: url(CODE_Bold.otf); } @font-face { font-family: sinkinsans; src: url(SinkinSans-400Regular.otf); } .clear { clear: both; } 

 <html> <head> <title>About | Potential Beginning</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </head> <body> <div id="container"> <div id="nav-bar"> <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div> <ul id="main-links"> <a href="about.html"><li><span class="word-position">About</span></li></a> <a href="work.html"><li><span class="word-position">Work</span></li></a> <a class href="contact.php"><li><span class="word-position">Contact</span></li></a> </ul> </div> <div id="main-content"> <div id="pic-container"> <div id="relative"> <div id="photo-frame"> <div id="picture"></div> </div> </div> <hr class="hidari" /> <hr class="migi" /> </div> <h1 id="page-header">About Me</h1> <p id="intro">Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content!</p> <div id="expertise"> <div id="skills" class="hidari"> <h1>Skills</h1> <div class="skill"> <h2>HTML/CSS</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> </div> <div id="experience" class="migi"> <h1>Experience</h1> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> <div id="footer"> <p id="footer-text"> &#169; 2016. All rights reserved. </p> </div> </div> <script> $(document).ready(function() { $("#main-links li").on('mouseenter', function() { $(this).animate({borderBottomColor: "rgb(0, 154, 205)"},"200"); }); $("#main-links li").on('mouseleave', function() { $(this).animate({borderBottomColor: "rgb(238, 0, 0)"},"200"); }); $("#picture").fadeOut(); $("hr").delay(800).animate( { width: "50%" }, 3200 ); $("#photo-frame").delay(4000).animate( { width: "180px", height: "180px", top: "-=90px", left: "-=90px", borderLeftWidth: "7.5px", borderTopWidth: "7.5px", borderRightWidth: "7.5px", borderBottomWidth: "7.5px" }, "slow", function() { $("hr").animate( { width: "0%" }, 2700 ); $("#picture").fadeIn(2000); }); }); </script> </body> </html> 

添加overflow:auto應該可以解決問題，這將防止內容由於浮動而重疊。

CSS：

#expertise
{
  overflow:auto;
}

演示

PS ：由於您已添加height:100px; 到CSS中的#skills ，您將在該部分獲得滾動條。

DEMO-2-此演示顯示沒有滾動條，我已刪除了#skills div的height ，或者可以將height設置為auto 。

請參閱下面的更新代碼：i）將span更改為div以clear class ii）刪除#skills div的高度iii）刪除#main-content和#footer ，這將使內容在填充內容時流動，不需要高度。 [並且您提到的主要內容為80％，頁腳為20％，這已經等於100％（不包括頁眉），如果需要，總是嘗試將高度相等。] iv）我在每項技能之后都添加了clear div來使每一項技能流彼此之間，否則對齊會出錯。 v）並且您忘記添加' . 在CSS中的.ability類前面