Вопросы Теги

CSS - Как заставить элементы использовать 100% оставшегося / доступного пространства родительского элемента, не выходя за его пределы?

На мой взгляд, этот вопрос кажется действительно любительским, но, тем не менее, это все еще неприятная аномалия.

На самом деле это вторая часть проблемы, состоящей из двух частей. Первая часть является довольно распространенной и связана с растяжением элемента до 100% высоты его родительского объекта. В моей демонстрации у меня есть следующий HTML-код: 

<body>      
<div id="sbcontainer">
    DIV 1
    <div id="sbcontent">
        DIV 2
        <table id="sbmaintable" cellspacing="0">
            <tr>
                <td>
                    TABLE
                </td>
            </tr>
        </table> <!-- END MAINTABLE -->
    </div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>

Я хочу, чтобы каждый элемент здесь заполнял все вертикальное пространство в пределах своего родительского элемента. Я пробовал использовать следующий стиль для каждого из элементов (обратите внимание, что BODY и HTML также установлены на 100% высоту в моей демонстрации): 

min-height: 100%; 
height: auto !important; 
height: 100%;

Результат был следующим: enter image description here

Как вы можете видите, самый внешний DIV следовал свойству высоты 100%, а остальные - нет. Как подразумевается в примечании к изображению, но на самом деле не показано на этом изображении, я попытался установить для 2-го DIV (красная граница) статическую высоту 400 пикселей, чтобы увидеть, будет ли ТАБЛИЦА внутри растягиваться до 100% высоты, но этого не произошло.

Затем я обнаружил, что если я удалю height: auto; из каждого из элементов, они будут следовать свойству высоты 100%, но с нежелательным побочным эффектом:

enter image description here

Как вы можете видеть на изображение, каждый элемент теперь действительно на 100% высоты своего родительского элемента, заставляя нижнюю часть выходить за границы своего родительского элемента.(Даже в моем первом примере самый внешний DIV с зеленой рамкой простирался дальше, чем хотелось бы, потому что над ним на странице есть еще один родственный DIV). ПРИМЕЧАНИЕ. Присмотревшись более внимательно, я вижу, что синий элемент TABLE на самом деле не такой же высоты, как его красный родительский элемент DIV, но он все еще выходит за его границы. Не уверен, что это значит что-нибудь, но я это замечаю.

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

Если я оставлю только height: auto; и удалю свойства 100% , это не растянет их вообще.

Я искал решения по этому поводу через Google и StackOverflow, и, хотя многие сайты освещали проблемы со стопроцентной высотой, я до сих пор не нашел реального решения.

В настоящее время я тестирую это в Firefox.

10
задан vertigoelectric 15 October 2011 в 14:08
поделиться