基本上，在#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">
© 2016. All rights reserved.
</p>
</div>
</div>
答案 0 :(得分：2)
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">
© 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;
}
P.S ：由于您已在css中将height:100px;添加到#skills，因此您会在该部分中看到滚动条。
DEMO-2 - 此演示显示没有滚动条，我删除了height的{{1}}，或者您可以将#skills div设置为{{ 1}}。
请参阅下面的更新代码：
i）将height更改为auto span
ii）移除div div的高度
iii）移除clear class和#skills的高度，这将使内容在内容填充时流动，不需要高度。 [并且你提到的主要内容为80％，页脚为20％已经等于100％除了标题之外，如果需要，总是尝试将高度分开。]
iv）我在每项技能之后添加#main-content以使每项技能彼此之间流动，否则对齐出错。
v）你忘了添加＆{39; #footer＆＃39;在css的clear div类前面