CSS: my side bar overflow the container div's border when I set it's height to 100%_问答_开发者

CSS: my side bar overflow the container div's border when I set it's height to 100%

开发者 https://www.devze.com 2022-12-28 05:43 出处：网络

My side bar overflow the container div\'s border when I set it\'s height to 100%, I would like to know if there is any way I can have it\'s height 100% minus some px.

相关专题：css

My side bar overflow the container div's border when I set it's height to 100%, I would like to know if there is any way I can have it's height 100% minus some px.

Here is the source开发者_高级运维:

<div id="main">
    <br /><br />
    <div class="content">
        <div id="sidecontent">
            <h1 id="title">Title</h1>
            *****
        </div>
        <div id="sidebar">
            <div class="sidebox">
                ****
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>


#main {
        position: relative;
    background:transparent url('/public/images/main_bg.png') top left repeat-y;
    padding:37px 37px 37px 37px;
    margin-left: auto ;
    margin-right: auto ;
    width:940px;
    min-height: 363px;
        }
        #main div.top, #main div.bottom {
        height:70px;
        width:1015px;
        position: absolute;
        left:0px;
        }

        #main div.content {
        padding:0 15px 0 15px;
        }

        #sidecontent {
        width: 675px;
        }

        #sidebar {
                background: #fff url('/public/images/bg_side.png') top right repeat-y;
        position: absolute;
        height: 100%;
                right:34px;
                top:42px;
        width: 200px;
        padding: 10px 10px 0px 40px;
                z-index:50;
        }

        .created_at {
        color:gray;
        }       

        .sidebox {
        margin-bottom: 5px;
        }

    #main div.top {
        top:-70px;
        background: transparent url(/public/images/main_top.png) bottom no-repeat;
        }

    #main div.bottom {
        bottom:-70px;
        background: transparent url(/public/images/main_bottom.png) top no-repeat;
        }

Try having a look at this article and see if you can follow that. It describes how to have two columns the same height using CSS techniques.

You should set a margin on it, or you can use padding for the surrounding div on it, if it's within a div.

Example within the container div:

margin-bottom: 5px;

Example within a div surrounding the container div:

padding-bottom: 5px;

Also, you can even place a div right after it in the html to push it up some, using margin-top.

I'm sorry, could you explain a bit better what you want to do again?

Maybe try this:

<head>
<style type="text/css">
#main {
        position: relative;
    background:transparent url('/public/images/main_bg.png') top left repeat-y;
    padding:37px 37px 37px 37px;
    margin-left: auto ;
    margin-right: auto ;
    width:940px;
    min-height: 363px;
        }
        #main div.top, #main div.bottom {
        height:70px;
        width:1015px;
        position: absolute;
        left:0px;
        }

        #main div.content {
        padding:0 15px 0 15px;
        }

        #sidecontent {
        width: 675px;
        }

        #sidebar {
                background: #fff url('/public/images/bg_side.png') top right repeat-y;
        position: absolute;
        height: 100%;
                right:34px;
                top:42px;
        width: 200px;
        padding: 10px 10px 0px 40px;
                z-index:50;
        }

        .created_at {
        color:gray;
        }       

        .sidebox {
        margin-bottom: 5px;
        }

    #main div.top {
        top:-70px;
        background: transparent url(/public/images/main_top.png) bottom no-repeat;
        }

    #main div.bottom {
        background: transparent url(/public/images/main_bottom.png) top no-repeat;
        }
</style>

</head>

<body>
<div id="main">
    <br /><br />
    <div class="content">
        <div id="sidecontent">
            <h1 id="title">Title</h1>
            *****
        </div>
        <div id="sidebar">
            <div class="sidebox">
                Here is some content in the sidebox class div....
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
</body>

Just removed the bottom: from the #main div.bottom css rule.