Авто расширяющаяся боковая колонка - PullRequest
Новая
       1

Авто расширяющаяся боковая колонка

0 голосов
/ 08 октября 2011

Я создаю веб-страницу, и у нее есть тег div с именем content, который имеет свойство CSS min-height: 200px;Я хочу добавить еще один тег div с высотой 100%, однако это не работает.Я хочу, чтобы он автоматически увеличивался, чтобы он выглядел хорошо, когда контент становится больше.Однако я не уверен, как это сделать.

Любая помощь приветствуется, но я хочу, чтобы она была строго XHTML и совместима с CSS3.

Попытка сделать что-то вроде этого: Something like this

-Это серая боковая панель, это то, что я хотел сделать, она была добавлена ​​в краску, остальное я уже сделал с CSS3.

1 Ответ

0 голосов
/ 08 октября 2011

Я понял проблему с высотой: 100%. Вот как я бы это сделал, используя только css:

здесь: 

<html>

<head>
<style type="text/css">
    body{
        background-color: #cbf;
    }

    #wrap {
        border-radius: 20px;
        margin: 10px auto;
        overflow: hidden;
        width: 900px;
    }

    #head {
        text-align: center;
        background-color: red;
        height: 100px;
        overflow: hidden;
    }

    #main {
        float: left;
        background-color: gray;
        min-height: 200px;
    }

    #sidebar {
        width:200px;
        float: left;
        background-color: gray;
    }

    #content {
        float:left;
        background-color: white;
        min-height: 200px;
        width: 700px;
    }

</style>
<title>
    example
</title>
</head> 

<body>
<div id="wrap">
    <div id="head">
        <h1>example site name</h1>
    </div>
    <div id="main">
        <div id="sidebar">
            &nbsp;
        </div>
        <div id="content">
            &nbsp;
            <p>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>

            </p>
        </div>
    </div>
</div>
</body>
</html>

Вы также можете создать боковую панель с помощью

        #wrap {
            background: url('bg.png') repeat-y white;
        }

bg.png должен быть изображением высотой 1 пиксель, ширина которого равна ширине боковой панели.Использование высоты CSS 100% не будет работать в этом случае.

Надеюсь, это поможет.

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

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

...