Смешивание относительных и абсолютных размеров в CSS

У меня есть вопрос о проблеме, о которой я изначально думал, что ее было бы довольно просто решить. Но, по-видимому, это не так - по крайней мере, не только с CSS.Смешивание относительных и абсолютных размеров в CSS

Это основная ситуация:

<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;"> 
    <div id="top" style="margin:5px;width:400px;background:#ffffff;"> 
    </div> 
    <div id="content" style="margin:5px;width:400px;background:#ffffff;"> 
    </div> 
</div>

У меня есть обертка DIV, который заполняет 90% от высоты экрана и два внутренних дивы. Первый div «top» содержит несколько разных элементов. Второй div «content» должен заполнить оставшееся пространство обертки div.

До сих пор я не нашел способ установить содержимое «div» для заполнения оставшегося пространства - даже если бы я знал точную высоту div «top», поскольку я знаю только относительную высоту обертка div.

Таким образом, я был бы рад узнать о методе либо «содержимого» div, чтобы заполнить оставшееся пространство, либо как смешать относительные и абсолютные размеры (то есть высота: 100% -100 пикселей).

источник

2012-02-11 shiin

Вашего HTML код действительно неправильно:

не следует использовать после запятой атрибутов
не использовать встроенный CSS, положить все CSS в таблице стилей и загрузить таблицу стилей в вашей HTML странице
синтаксис CSS является: propertie: value; пример: width: 10px; нет: width=10px

Для использования 100% - 100 пикселей вы можете использовать CSS3 calc, но эта функция имеет less browser support. Вы можете использовать JS для создания своего рода функции calc.

источник

2012-02-11 11:33:01

Спасибо за ввод. Я исправил ошибки написания синтаксиса (фактический код явно не имел их, также он имеет свой собственный файл css, но для мини-примера я подумал, что было бы проще разместить их рядом с html tags) – shiin

почему -1 на этот ответ?Я написал «вопиюще неряшливый, без усилий материал»? Или ответ «явно и, возможно, опасно неверный»? –

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

<html> 
<head> 
<style type="text/css"> 
#wrapper { 
height:90%;width:410px;background:#aaaaaa;border-spacing:5px; 
} 
#wrapper td { 
padding:0;vertical-align:top; 
} 
#top { 
background:#ffffff; 
} 
#content { 
height:100%;background:#ffffff; 
} 
</style> 
</head> 

<body> 
<table id="wrapper" role="presentation"> 
    <tr> 
    <td id="top">Top</td> 
    </tr> 
    <tr> 
    <td id="content">Content</td> 
    </tr> 
</table> 
</body> 
</html>

EDIT:

Оказывается, я пошевелил гнездо шершней с моим ответом. Похоже, что почти религиозные люди говорят, что использование таблиц для макета плохое. Во многих случаях это абсолютно верно, однако there are situations where a table will do what CSS cannot. Это одна из тех ситуаций, когда альтернатива CSS стоит на горизонте, но большинство браузеров еще не поддерживают ее. Разработчик сайта может решить, хочет ли он иметь макет с кросс-браузерной функциональностью или использовать чистый макет CSS с его ограничениями, которые могут стать более удобными в будущем.

источник

2012-02-11 11:42:20 Feysal

Никогда, никогда не используйте таблицы для раскладки. – Rob

Затем предоставите кросс-браузерное решение этой проблемы, которое не использует таблицы. – Feysal

@Feysal - если вы действительно должны использовать таблицу для базового кроссбраузерного эффекта, вы могли бы по крайней мере смягчить свои проблемы. cellpacing и cellpadding, устаревшие в следующей версии HTML, безусловно, могут быть заменены CSS, а добавление 'role =" представления "" в элемент таблицы прекратит вызывать таблицу как таблицу в современных читателях экрана, удаляя наиболее повреждающий эффект использования таблицы для макета. – Alohci

Там нет кросс-браузерный способ получить DIV контента, чтобы заполнить все доступное пространство с помощью CSS, но это довольно легко сделать вещи выглядят так, как будто это было:

<html> 
<head> 
<style type="text/css"> 
#wrapper { 
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff; 
} 
#top { 
border-bottom: 5px solid #aaaaaa; 
} 
#content { 
} 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="top"> 
    Top 
    </div> 
    <div id="content"> 
    Content 
    </div> 
</div> 
</body> 
</html>

Это должно быть достаточным для в большинстве ситуаций, если вы не хотите использовать что-то вроде обработчика onmouseover.

источник

2012-02-11 14:02:34 Feysal

Спасибо за решение. Но «если» вы не заявили о себе, это то, что вы не можете сделать. Кроме того, у вас не может быть прозрачной границы, чтобы показать, что находится под всеми этими div (прозрачная граница будет показывать только div). – shiin

Границы не прозрачны, они заданы тем же серым тоном, что и фон обертки в вашем вопросе, чтобы получить желаемый визуальный эффект. – Feysal

Да, конечно. Я имел в виду: если бы я переключился на использование прозрачной оболочки в моем примере, ваше решение больше не работало. – shiin

Смешивание относительных и абсолютных размеров в CSS

ответ

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