[英]Div not expanding with content inside
Basically, in the #main-content div, I would like it to expand, so the de facto content of that div fits inside and is not overlapping, like you see in the codepen. 基本上,在#main-content div中,我希望它进行扩展,因此该div的实际内容适合内部并且不会重叠,就像在Codepen中看到的那样。
I don't know how to implement the clearfix solution or the overflow:hidden solution. 我不知道如何实现clearfix解决方案或overflow:hidden解决方案。 I've tried but failed.
我已经尝试过但是失败了。
I don't know why, but the p tag is not overlapping, but the JavaScript/jQuery progress bars are. 我不知道为什么,但是p标签没有重叠,但是JavaScript / jQuery进度条是重叠的。 :/
:/
Codepen: http://codepen.io/DocRow10/pen/hjIkq Codepen: http ://codepen.io/DocRow10/pen/hjIkq
Snippet: 片段:
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>
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>
Adding overflow:auto
should do the trick, this will prevent the content from overlapping due to floats. 添加
overflow:auto
应该可以解决问题,这将防止内容由于浮动而重叠。
CSS: CSS:
#expertise
{
overflow:auto;
}
PS : since you have added height:100px;
PS :由于您已添加
height:100px;
to #skills
in css , you get scroll bar in that section. 到CSS中的
#skills
,您将在该部分获得滚动条。
DEMO-2 - This demo shows without scrollbar, I have removed the height
for #skills div
or you can set the height
to auto
. DEMO-2-此演示显示没有滚动条,我已删除了
#skills div
的height
,或者可以将height
设置为auto
。
See the updated code below: i)Change the span
to div
for clear class
ii)remove the height for #skills
div iii)remove height of #main-content
and #footer
, this will make the content flow as and when the content fills,height is not required. 请参阅下面的更新代码:i)将
span
更改为div
以clear class
ii)删除#skills
div的高度iii)删除#main-content
和#footer
,这将使内容在填充内容时流动,不需要高度。 [And main-content u have mentioned as 80% and footer as 20% which already equals to 100% excluding the header,always try to split the height equal if required.] iv) I have added clear div
after each skill to make each skill flow below each other, else the alignment goes wrong. [并且您提到的主要内容为80%,页脚为20%,这已经等于100%(不包括页眉),如果需要,总是尝试将高度相等。] iv)我在每项技能之后都添加了
clear div
来使每一项技能流彼此之间,否则对齐会出错。 v) and u forgot to add ' .
v)并且您忘记添加'
.
' in front of .ability
class in the css 在CSS中的
.ability
类前面
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.