Simple div with header,footer and body

2019-04-12 22:59发布

I need a simple div with header,footer and body content.

The header and footer needs to be fixed and the height of div should be 250px or max 500px and its width is 500px And my body content should be fluid so that it should extend the content.

Header and footer needs to be 40px.

And I need a horizontal line after header and above footer.

I have done it but I am unable to set its footer as I am going nuts with the alignment.

Can anyone suggest me with this:

CSS:

mainbody
{
position:absolute;
Left:35%;
top:20%;
display:none;
height:250px;
width:500px;
margin-top: 0;
border:1px solid #fff;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#ffffff;
z-index:50;
}


.header
{
    height: 30px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    width: 490px;
    padding: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.footer
{
width:500px;
margin-bottom: 0;
margin-top: 37px;
margin-left:-5px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;            
}

This is what I need:

enter image description here

5条回答
Evening l夕情丶
2楼-- · 2019-04-12 23:22

This could do what you need: http://jsfiddle.net/FZGL4/

.mainbody
{
    min-height: 250px;
    width: 500px;
}


.header
{
    height: 40px;
    width: 500px;
    border-bottom: #000 1px solid;

}


.footer
{
    height: 40px;
    width: 500px;
    border-top: #000 1px solid;       
}​
查看更多
Ridiculous、
3楼-- · 2019-04-12 23:24

You need to simplify your approach. I put the drop-shadow and rounded corners on a div.container, and then mirror the rounded corners as applicable (top and bottom) so you don't have blocky overlaps. I also added some min-height and max-height values, with overflow: auto on the .mainbody element.

.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.footer {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div id="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <p>Body</p>
    </div>
    <div class="footer">Footer</div>
</div>

http://jsfiddle.net/VzGAy/2/

查看更多
孤傲高冷的网名
4楼-- · 2019-04-12 23:25

dont know whether this would fit your needs .. but,check out.. http://jsfiddle.net/aFgDN/1/

.header
{
position:fixed;
height: 30px;
background-color: yellow;
width: 500px;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
    overflow:hidden;

}
.mainbody{
position:fixed;
top:30px;
bottom:40px;
min-height:250px;
width:500px;
border:1px solid black;
background-color:red;
}
.footer{
width:500px;
position:fixed;
bottom:0;
height:40px;
background-color: blue;

}

This would be your html ..

<body>
<div class="header"></div>
<div class="mainbody"></div>
<div class="footer"></div>
</body>

have removed other things from your css -- you can add it later..

查看更多
冷血范
5楼-- · 2019-04-12 23:26

I made some tweaks to your CSS:

http://jsfiddle.net/Cx4qG/

查看更多
可以哭但决不认输i
6楼-- · 2019-04-12 23:27

The position:absolute property removes your div from the natural flow of your document, thus leaving it to manual positioning that has to be modified every time. So, just let it flow naturally and contain your divs inside a container with the rounded effects you want, this way you can highly simplify your css and more easily manage your document, like so:

HTML

<div class="container">
    <div class="header">
        header
    </div>
    <div class="mainbody">
        main body
    </div>
    <div class="footer">
        footer
    </div>
</div> 

CSS

.container:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.container:after {
    clear:both;
}

.container {
    width:500px;
    margin:0 auto;
    border:1px solid #fff;
    box-shadow:0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:#ffffff;
}

.mainbody {
    height:250px;
    width:500px;
    border: solid #eee;
    border-width:1px 0;
}


.header, .footer {
    height: 40px;
    padding: 5px;
}


.footer {
    background-color: whiteSmoke;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
}

Demo: http://jsfiddle.net/n6pSm/

查看更多
登录 后发表回答