I have a problem with my CSS where the height of the parent div (#cotentWrapper) is not expanding to fit the height of the child div (#bodyContent) once its content overflows. We are using percentages for our heights. We have tried various solutions found here on stack overflow but none resolved this problem. We have tried setting height to auto on #contentWrapper which solved our problem specified above it caused our nav bar to disappear which is also encapsulated in the #contentWrapper div. We have set min-heights on all DIVs it should work.
HTML:
<div id="header">
<div id="logoWrapper">
<div id="logoImg"></div>
</div>
</div>
<div id="contentBoxShadow">
<div id="navigation">
</div>
<div id="bodyContent">
Lorem ipsum dolor sit amet, vidisse corrumpit mel ea, te purto oportere assueverit nam. Ut pro mazim utinam gloriatur, eum tempor eruditi eu, iudico laboramus nec ei. Ancillae offendit officiis vim ea. Cu fabellas sapientem maiestatis his, at consequat deseruisse sea. Illum singulis suavitate mea no, vivendum tincidunt eloquentiam ius an. His no etiam copiosae, quo an delicata volutpat petentium.
An esse ridens ullamcorper ius, an est scaevola voluptatibus. Est ne iusto oratio. Laboramus deseruisse nec te, laoreet accumsan ut pri. Qui eu lorem repudiare, utroque epicuri ius ne. Ipsum adversarium definitionem eu vis, an vim paulo discere atomorum.
Cu case bonorum vix, te sit habeo audiam electram. Ad cum graeco sadipscing, justo mandamus pertinacia mel id, ei eam soluta melius inimicus. Ad vel propriae aliquando, graeci aliquam petentium ea his. Mel ut maiorum albucius reprehendunt. Sed referrentur neglegentur te, usu ea quot aliquando, eu mei recusabo constituam vituperatoribus. Oratio volutpat tincidunt per et, at vitae facete virtute vis.
Ut quis solum qui, essent utamur eloquentiam no sea. Est eros suscipit deseruisse ex. Sit illud tractatos consectetuer te. Ad mutat noluisse eum. At sit volumus tincidunt.
</div>
</div>
</div>
CSS: * { padding: 0; margin: 0; }
html, body {
width: 100%;
height:100%;
min-height: 100%;
position: relative;
}
body
{
background-image: url("Images/textured_background.png");
background-repeat: repeat;
background-attachment: fixed;
}
#contentWrapper
{
width: 88%;
height: 100%;
//height: auto;
min-height: 100%;
margin: 0 auto;
}
#contentBoxShadow
{
width: 100%;
min-height: 85%;
height: 85%;
background-color: #EFEFEF;
background-color: pink;
position: relative;
}
#bodyContent
{
width: 90%;
height: 93%;
height: auto;
min-height: 93%;
padding-left: 30px;
padding-right: 30px;
background-color: white;
margin: 0 auto;
}
#header
{
height: 15%;
width: 100%;
}
#logoWrapper
{
padding-top: 1.5%;
padding-bottom: 1.5%;
height: 97%;
width: 100%;
}
#logoImg
{
background-image:url("Images/logo.png");
background-size: contain;
background-repeat: no-repeat;
height: 100%;
width: auto;
}
#contentBoxShadow:before {
box-shadow: -15px 0 15px -15px inset;
content: "";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
#contentBoxShadow:after {
box-shadow: 15px 0 15px -15px inset;
content: "";
height: 100%;
position: absolute;
right: -15px;
width: 15px;
top: 0;
}
#navigation
{
height: 7%;
width: 100%;
background-image: -ms-linear-gradient(top, #004A94 0%, #003366 100%);
background-image: -moz-linear-gradient(top, #004A94 0%, #003366 100%);
background-image: -o-linear-gradient(top, #004A94 0%, #003366 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #004A94), color-stop(1, #003366));
background-image: -webkit-linear-gradient(top, #004A94 0%, #003366 100%);
background-image: linear-gradient(to bottom, #004A94 0%, #003366 100%);
}
Aucun commentaire:
Enregistrer un commentaire