CSS-макет с пикселями и процентами

Question

У меня есть div, который содержит два вложенных div, один, который задает высоту 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;}

Answer 1

Самое простое решение - переместить заголовок в ваш контент ... тогда он займет место внутри блока контента, а не над ним.

Если это не вариант, существует множество решений, которые могут решить проблему. Вот список нескольких:

1) Абсолютно расположите заголовок, с z-индексом, скажем, 10. Дайте содержимому div верхний отступ 65px, с z-индексом 1. Заголовок должен охватывать верхнюю заполненную область содержимого div. Это будет прекрасно работать с очень жесткими конструкциями, у которых нет динамической ширины, которая увеличивается / уменьшается с шириной окна браузера.

2) Явно расположите верхнюю, левую, нижнюю, правую части вашего содержимого div. Не указывайте ширину или высоту. В этом случае верхний, левый, нижний и правый значения рассчитываются на основе внутреннего края заполнения содержащего блока содержимого div. Опять же, это прекрасно работает в жестких сайтах. Должно работать в IE7 / 8, но будет проблематично с IE6 и более ранними версиями.

3) Используйте отрицательное верхнее поле og -65px для содержимого div. Используйте верхний отступ 65px для компенсации. Это может быть проблематично с IE7 и более ранними версиями, и иногда FireFox становится шатким с отрицательными полями Есть взломы, которые могут решить проблему, просто искать в сети. Это должно работать для жестких или жидких макетов.

В сети много ресурсов для CSS-дизайна. Если вышеупомянутые опции не работают, некоторые поиски в сети должны вызвать некоторые ресурсы.

Answer 2

Попробуйте прочитать эту статью сначала ... речь идет о Конфликт абсолютных позиций в шаблоне CSS и каким-то образом решает проблему, о которой вы говорите.

Answer 3

(100% + N)> 100% - к сожалению, в CSS нет такого понятия, как «остальное пространство».

Когда вы говорите «100%», это как раз и означает, что вашей лучшей ставкой будут либо варианты jrista 2, либо 3 (позиционирования imho abs следует избегать). Я также думаю, что вы могли бы хотеть положение Google: исправлено.

Answer 4

На данный момент у вас есть 2 деления с общей высотой 100% + 65px, поэтому у него должна быть полоса прокрутки

Вы действительно не можете делать то, что вы пытаетесь, просто используя div, не прибегая к CSS-хаки. Самый простой и совместимый с браузером способ сделать это - заключить его в таблицу из 2 строк. Установите высоту таблицы на 100%, первая высота td равна 65px, вторая высота td не указана. Некоторые люди против использования таблиц для разметки, но если вы все равно собираетесь использовать css неправильно, то почему бы и нет?

Хотя было бы лучше использовать дизайн только с одним делением над другим. Динамическая настройка контента для браузера больше не работает из-за большого разнообразия размеров экрана.