Масштабирование Div до содержания, когда высота установлена на 100%

У меня есть три вложенных divs, с внутренним, имеющим фиксированную высоту, среднюю, предназначенную для заполнения внешней, и внешнюю, вмещающую застрявшую нижний колонтитул. Но средний div, кажется, только выше, чем внутренний, чего я не хочу.Масштабирование Div до содержания, когда высота установлена на 100%

Я уменьшил проблему до следующего, что, на мой взгляд, является минимальным примером. Я не хочу изменять свойства высоты внешнего или внутреннего divs, так как это будет мешать остальной части макета. Есть ли способ сделать то, что я хочу, просто изменив свойства среднего div?

Вот HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
     </div> 
    </body> 
</html>

И CSS:

html{height:100%;} 
body{height:100%;} 
#outer{height: auto; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;}

Вы можете проверить, что #middle ДИВ получает высоту 500 в то время как я хочу, чтобы заполнить #outer DIV.

Я полный новичок в CSS, и почти весь код копируется из разных учебников и/или проб и ошибок. Поэтому, пожалуйста, извините меня, если я делаю что-то вопиющее неправильно/глупо.

Редактировать: Не понимаю, почему, но кажется, что удаление объявления doctype заставляет проблему уйти. Поэтому я изменил образцы кода, чтобы включить объявление.

источник

2013-03-20 ronno

вы попробуйте использовать Firebug, чтобы увидеть CSS, который применяется к этому div? –

@IvayloStrandjev Я попытался использовать элемент проверки. В нем говорится, что к нему применяется только стиль: height: 100%; ' – ronno

Ваша ошибка заключалась в том, что класс 'body' и 'html' был высок: 100% (что ничего не делает). Вместо этого я добавляю ваш внешний div на 100% высоты.

<html> 
<head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;} 
</style> 
</head> 

<body> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"></div> 
     </div> 
    </div> 
</body> 
</html>

В случае, если Вы не могли бы работать, как получить колонтитула в миксе, я дал вам пример тоже:

<html> 
    <head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%; position: relative;} 
#middle{height: 100%;} 
#inner{height:500px;} 
#footer{height:100px;width:100%;position:absolute;bottom:0;} 
</style> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
      <div id="footer">This is the footer</div> 
     </div> 
    </body> 
</html>

источник

2013-03-20 18:04:28 Ozzy

Теперь это выходит за рамки моего понимания html/CSS. Единственное различие между вашим файлом и моим, что создает проблему, заключается в том, что мой html имеет объявление doctype наверху. Я буду внести соответствующие изменения в этот вопрос, чтобы отразить это. – ronno

@ronno Я не поставлял вам весь файл, это был просто пример LOL. Добавлен пример наличия нижнего колонтитула в этом макете для вас. – Ozzy

@ronno О, я не думаю, что вы заметили, я немного изменил ваш CSS. Есть разница, так как я написал выше пример кода – Ozzy

Масштабирование Div до содержания, когда высота установлена ​​на 100%

ответ

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

Масштабирование Div до содержания, когда высота установлена на 100%