Динамическое изменение размера DIV с использованием CSS - PullRequest
Новая
       0

Динамическое изменение размера DIV с использованием CSS

0 голосов
/ 03 февраля 2012

У меня проблема с динамическим изменением высоты div моей боковой панели в соответствии с div содержимого. Основываясь на различных других вопросах здесь и поиске в Google, я подумал, что без установленной высоты он будет использовать родительскую высоту div, но вместо этого он автоматически подгоняет высоту к содержимому.

Это можно увидеть на "baradineholdings.com.au" (пожалуйста, не судите о сайте, я новичок и предпочел бы, чтобы основы работали должным образом, прежде чем я сделаю его "красивым").

Домашняя страница выглядит нормально, в основном из-за отсутствия контента. Если вы перейдете на страницу about, вы увидите проблему. Я почти подозреваю, что в случае с главной страницей div контента принимает высоту div боковой панели, но я не уверен почему.

HTML; 

<body>
    <div id="wrapper">
        <?php include('includes/header.php'); ?>
        <div id="internal">
            <div id="sidebar">
                <h3>Navigation</h3>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="gallery.php">Gallery</a></li>
                    <li><a href="contact.php">Contact</a></li>
            </div> <!-- end #sidebar -->
            <div id="content">
                <p>Images Coming Soon!</p>
                <p>Please see the about page for more information.</p>
            </div> <!-- end #content -->
        </div> <!-- end #internal -->
        <?php include('includes/footer.php'); ?>
    </div> <!-- end #wrapper -->
</body>

CSS; 

body {
background-color: #f1f1f1;
font-family: georgia,sans-serif;
color: #333;
margin: 0;
padding: 0;
}

#wrapper {
width: 960px;
background-color: #f1f1f1;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

#internal
{
width: 959px;
height: auto;
background-color: #f1f1f1;
margin: 0 auto;
border-right: 1px solid #ccc;
}

#content {
width: 675px;
height: auto;
float: left;
padding: 10px;
}

#sidebar {
width: 150px;
/* height: 410px; */
float: left;
background-color: #27408B;
color: white;
}

#sidebar a {
text-decoration: none;
color: white;
}

#sidebar li {
list-style: none;
}

Как я уже сказал; нуб. Так что я, вероятно, делаю что-то глупое здесь ... Я пробовал jsfiddle, но даже используя большое количество контента на странице about, он делает его маленьким, поэтому он не влияет на боковую панель ... Я тестировал в Chrome и IE, у обоих одинаковая проблема.

Ответы [ 2 ]

3 голосов
/ 03 февраля 2012

Это можно легко исправить с помощью существующего кода. Основной метод описан здесь: CSS-столбцы равной высоты .

По сути, вы имитируете его, добавляя цвет боковой панели в div обертки (в вашем случае вы можете использовать существующий #internal). Поскольку этот div на самом деле содержит основной контент, он будет расширяться по мере необходимости. Чтобы это выглядело как боковая панель, вы даете основному контенту цвет фона, соответствующий вашему телу. У фактического div боковой панели нет фона, он просто содержит текст. Возможно, вам придется увидеть это в действии, чтобы это действительно имело смысл, но вот соответствующие биты CSS: 

#internal {
    background-color: #27408B; /* the color you want for the sidebar */
}

#content {
    background-color: #f1f1f1; /* matches the body background */
}

А затем удалите линию цвета фона с #sidebar. (Мне также пришлось добавить float в #internal и изменить его ширину на auto, чтобы все заработало.)

Вот оно в JSFiddle

0 голосов
/ 03 февраля 2012

Чего вы хотите достичь?Синяя боковая панель имеет ту же высоту, что и текст в области содержимого?Если это так, самый простой способ - поместить в фоновое изображение синее фоновое изображение, содержащее боковую панель и тег содержимого.

Чтобы сделать это, вы должны поставить

после вашего
...
Таким образом, ваш внутренний идентификатор id будет расти с ростом высоты плавающих дочерних элементов. 
<div class="sidebar">...< /div><br />
<div class="content">...< /div><br />
< div style="clear:both">...< /div><br />

После этого вы можете добавить повторяющееся синее изображение:

#internal {
background: url(blue.png) top left repeat-y;
}

Альтернативой является использование хаков jquery / css, но я сомневаюсь, что оно того стоит.

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

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

...