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

StackOverflow https://stackoverflow.com/questions/928160

  •  06-09-2019
  •  | 
  •  

Вопрос

У меня есть 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: исправлено.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top