问题描述:

I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "contactCopy".

<div id="contactCopy">

<div id="contactLeft">

CONTACT

</div>

<div id="contactRight">

<iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

</div>

<div id="bottomGrey"></div>

<div class="clr"></div>

</div>

the CSS

#contactLeft{

float:left;

width:30%;

padding:5%;

}

#contactRight{

float:left;

width:640px;

height:480px;

padding-top:5%;

padding-bottom:5%;

margin-left:5%;

position:relative;

}

#contactCopy{

position:relative;

}

#bottomGrey{

position:absolute;

bottom:0;

height:10%;

width:100%;

}

but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS.

This should be simple but :(

Live site: http://estes.nbson.com/contact.html

网友答案:

It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.

网友答案:

Just add this to your CSS:

#contactCopy:after {
    display: block;
    height: 10px;
    width:100%;
    background-color: grey;
    content: "";
    clear: both;
}

With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.

网友答案:

Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.

相关阅读:
Top