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

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

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

домашняя страница выглядит хорошо, в основном из-за отсутствия контента. Если вы перейдете к странице о странице, вы можете увидеть эту проблему. Я почти подозреваю, что в случае главной страницы контент 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, но даже используя большое количество контента на странице, он делает его маленьким, поэтому он не влияет на боковую панель ... I «Проверено в Chrome и IE, обе имеют такую же проблему.

источник

2012-02-03 FizzBuzz

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

В принципе, вы подделываете его, добавляя свой цвет боковой панели к обертке 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 и изменить его ширину на авто, чтобы заставить все работать.)

Here it is in JSFiddle

источник

2012-02-03 00:36:31 ellawren

Хорошая ссылка. Мне также нравится http://css-tricks.com/fluid-width-equal-height-columns/ –

Ха, это замечательное обходное решение, я не думал об этом так! Спасибо :) – FizzBuzz

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

Чтобы сделать это, вы должны поставить < стиль Div = "ясно: как"> </DIV> после < сНу класс = "содержание"> ... </DIV>
Таким образом, идентификатор внутренний div будет расти с высотой плавающих элементов детей.

<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 хаки, но я сомневаюсь, что это стоит усилий.

источник

2012-02-03 00:34:14 driedoezoe

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

ответ

Смежные вопросы