Div выходит за пределы страницы

Question

Div выходит за пределы страницы

0

Не могу понять, почему он слишком высокий, извините:

html {
    min-height:100%;
    position:relative;
}

body {
    height:100%;
    background-color:darkblue;
    background-image:url(background.png);
    background-repeat:repeat-y;
    background-position:center center;
    background-size:100% 100%;
    padding:0;
    margin:0;
}

#wrapper {
    width:65%;
    top:0; bottom:0; right:0; left:0;
    background-color:#bad6e8;
    border:2px solid black;
    padding:0;
    margin: 0 auto;
}

#header {
    width:100%;
    height:10%;
    background-color:#bad6e8;
    border-bottom:2px solid black;
    padding:2px;
}

#user {
    width:25%;
    height:250px;
    background-color:#bad6e8;
    border-right:2px solid black;
    border-bottom:2px solid black;
    float:left;
    padding:2px;
}

#menu {
    width:100%;
    height:35px;
    background-color:#bad6e8;
    border-bottom:2px solid black;
    padding:2px;
    margin-bottom:2px;
}

#content {
    width:100%;
    height:100%;
    background-color:lightblue;
}

а также:

<html>
    <head>
        <title>Playdux</title>
        <link rel="stylesheet" type="text/css" href="design.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                Header
            </div>
            <div id="content">
                <div id="user">
                    Usermenu
                </div>
                <div id="menu">
                    Menü
                </div>
                Content
            </div>
        </div>
    </body>
</html>

Дилер "обертки" должен пройти весь путь от верхней части страницы до нижней. Остановка там, если у него недостаточно контента, чтобы выйти за рамки этого.

Но, без достаточного контента, это просто намного выше предела. Мой CSS сейчас немного испорчен, потому что я все время пытался понять его.

TemporaryName 28 нояб. 2013, в 21:28

Источник

2

это помогло бы сделать jsfiddle для них, чтобы помочь визуализировать, что происходит .. вот, я сделал один для вас: jsfiddle.net/bUE4M
msturdy 28 нояб. 2013, в 20:17
0

Похоже, вы бы хорошо использовали таблицы .... или css display: table;
Gary Hayes 28 нояб. 2013, в 20:45

Теги:

html

css

1 ответ

Ещё вопросы

это помогло бы сделать jsfiddle для них, чтобы помочь визуализировать, что происходит .. вот, я сделал один для вас: jsfiddle.net/bUE4M
Похоже, вы бы хорошо использовали таблицы .... или css display: table;

Olaf Dietsche · Accepted Answer · 2013-11-28T18-55-00.000Z

Чтобы удлинить wrapper сверху вниз, вы должны position: fixed position: absolute или position: fixed

#wrapper {
    width:65%;
    position: absolute;
    top:0; bottom:0; right:0; left:0;
    background-color:#bad6e8;
    border:2px solid black;
    padding:0;
    margin: 0 auto;
}

Вы также должны удалить height: 100% от content. Поскольку это интерпретируется как 100% содержащего блока, который является wrapper в этом случае

#content {
    width:100%;
    background-color:lightblue;
}

Посмотреть полный JSFiddle

Другой способ сделать это: drop top:0; bottom:0; right:0; left:0; top:0; bottom:0; right:0; left:0; направо top:0; bottom:0; right:0; left:0; и просто height: 100%

html, body {
    height: 100%;
}

#wrapper {
    height: 100%;
}

Смотрите другой JSFiddle