CSS-макет с Пикселями и Процентами
Вопрос
У меня есть div, который содержит два вложенных divs, один из которых указывает высоту 65 пикселей (заголовок), другой, который указывает высоту как 100% (содержимое), и предполагается, что он занимает все остальное пространство в реальном времени.При рендеринге страницы справа появляется полоса прокрутки из-за заданной высоты заголовка в 65 пикселей.
Что я делаю неправильно, смешивая проценты и пиксели?Должно быть, я что-то упускаю.Как мне исправить это, чтобы раздел содержимого использовал остальное пространство страницы и у меня не было полосы прокрутки?
Вот разметка ASP .NET и CSS, которые я использую:
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div id="header">
<div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div>
<div style="float: right; height: 100%">
<div id="outer" >
<div id="middle">
<div id="inner">
<asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%"
DynamicResize="True" CssClass="junk">
<panes>
<ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true">
<Template>
<asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server">
<ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true"
Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single"
InitialExpandDepth="1"
Width="100%" BorderWidth = "0px"
EnableAjax ="true">
<AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" />
</ig:WebDataTree>
</asp:ContentPlaceHolder>
</Template>
</ig:SplitterPane>
<ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%">
<Template>
<asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/>
</Template>
</ig:SplitterPane>
</panes>
</ig:WebSplitter>
</div>
</div>
html { padding: 0px; margin: 0px; border: none; width: 100%; height: 100%; font-family: verdana; font-size: x-small; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; text-transform: none; float: none; } body { border: none; padding: 0px; height: 100%; width: 100%; border: none; margin: 0px; } form { border: none; margin: 0px; padding: 0px; border: none; height: 100%; width: 100%; } span.appname { text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 18pt; font-weight: bold; font-style: normal; color: #FFFFFF; padding-right: 10px; } #header { background: #295984; width: 100%; height: 65px; overflow: hidden; } #content { display: inline; width: 100%; height: 100%; } #outer {height: 100%; overflow: hidden; position: relative; width: 100%;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%; text-align: right;} /* for explorer only */ #inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/ #inner[id] {position: static;}
Решение
Самое простое решение - переместить ваш заголовок в ваш контент...тогда он будет занимать место внутри блока контента, а не над ним.
Если это невозможно, существует множество решений, которые могли бы решить проблему.Вот список из нескольких:
1) Абсолютно расположите заголовок, скажем, с z-индексом 10.Присвойте div-элементу содержимого отступ размером 65 пикселей с z-индексом, равным 1.Заголовок должен закрывать верхнюю заполненную область раздела содержимого.Это будет отлично работать с очень жесткими конструкциями, которые не имеют динамической ширины, увеличивающейся / уменьшающейся в зависимости от ширины окна браузера.
2) Явно расположите верхнюю, левую, нижнюю, правую часть вашего содержимого div.Не указывайте ширину или высоту.В этом случае верхний, левый, нижний и правый значения вычисляются на основе внутреннего края заполнения содержащего блока содержимого div.Опять же, это отлично работает в жестких конструкциях сайтов.Должно работать в IE7 / 8, но будет проблематично с IE6 и более ранними версиями.
3) Используйте отрицательное верхнее поле og -65px в разделе содержимого.Используйте верхний отступ размером 65 пикселей для компенсации.Это может быть проблематично с IE7 и более ранними версиями, и иногда FireFox становится шатким с отрицательными полями.Есть хаки, которые могут решить проблему, просто поищите в сети.Это должно сработать для жестких или плавных компоновок.
В сети существует множество ресурсов для CSS-дизайна.Если вышеперечисленные параметры не работают, некоторые поисковые запросы в сети должны привести к появлению некоторых ресурсов.
Другие советы
Попробуйте почитать эта статья Первый...речь идет о Конфликтующие Абсолютные позиции в шаблоне CSS и каким-то образом это решает проблему, о которой вы говорите.
На данный момент у вас есть 2 divs с общей высотой 100% + 65 пикселей, поэтому у него должна быть полоса прокрутки
На самом деле вы не можете делать то, что пытаетесь, только с помощью divs, не прибегая к css-взломам.Самый простой и наиболее совместимый с браузером способ сделать это - заключить его в таблицу из 2 строк.Установите высоту таблицы равной 100%, первую высоту td равной 65 пикселей, вторую высоту td не указано.Некоторые люди против использования таблиц для верстки, но если вы все равно собираетесь использовать css неправильно, то почему бы и нет?
Хотя было бы лучше использовать дизайн только с одним div над другим.Динамическая настройка контента в браузере больше не работает должным образом из-за большого изменения размеров экрана.
(100% + N) > 100% - к сожалению, в CSS нет такого понятия, как "остальное пространство".
Когда вы говорите "100%", это означает именно это, поэтому вашим лучшим выбором будут варианты jrista 2 или 3 (имхо, следует избегать позиционирования abs).Я также думаю, что вы, возможно, захотите использовать Google position: исправлено.