CSS: моя боковая панель переполняет границу контейнера, когда я устанавливаю ее высоту на 100% - PullRequest
Новая
       10

CSS: моя боковая панель переполняет границу контейнера, когда я устанавливаю ее высоту на 100%

0 голосов
/ 28 апреля 2010

Моя боковая панель переполняет границу контейнера, когда я устанавливаю его высоту на 100%, Я хотел бы знать, есть ли какой-нибудь способ, которым я могу иметь его высоту 100% минус несколько пикселей.

Вот источник: 

<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;
        }

Ответы [ 2 ]

0 голосов
/ 28 апреля 2010

Попробуйте взглянуть на эту статью и посмотреть, сможете ли вы следовать ей. В нем описано, как использовать два столбца одинаковой высоты с помощью методов CSS.

0 голосов
/ 28 апреля 2010

Вы должны установить поле для него, или вы можете использовать отступы для окружающего div на нем, если он находится внутри div.

Пример внутри контейнера div: 

margin-bottom: 5px;

Пример внутри div, окружающего контейнер div: 

padding-bottom: 5px;

Кроме того, вы можете даже поместить div сразу после него в html, чтобы увеличить его, используя margin-top.

Извините, не могли бы вы немного объяснить, что вы хотите сделать снова?

Может быть, попробовать это: 

<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>

Только что удалил нижнюю часть: из правила #main div.bottom css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...