Переполнение: Авто с полями - PullRequest
Новая
       13

Переполнение: Авто с полями

1 голос
/ 30 марта 2009

У меня есть простой <ul>, который имеет фиксированную позицию, с высотой, установленной на 100%, и переполнением до авто. Это позволяет мне прокручивать, когда высота окна становится меньше высоты неупорядоченного списка.

Единственная проблема с этим состоит в том, что я хочу, чтобы неупорядоченный список был 30px от верхней части страницы. Когда появляются полосы прокрутки, нижняя часть <ul> фактически отсутствует, и, кроме того, нижняя часть полосы прокрутки отсутствует из-за верхнего поля.

Вот примерная разметка: 

<div id="sidebar">
  <ul>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
  </ul>
</div>

и CSS 

div#sidebar {
    width:148px;
    height:100%;
    overflow:auto;
    position:fixed;
    margin-top:30px;
}

Есть идеи, как обойти эту причуду?

РЕДАКТИРОВАТЬ: Argh, забыл добавить положение: исправлено

Ответы [ 2 ]

0 голосов
/ 30 марта 2009

Как сказал Джоэл, поле + высота складываются вместе, поэтому вы должны использовать контейнер.

Также имейте в виду любые возможные внешние поля или отступы. Это должно работать идеально (протестировано в IE7 + Opera 10), если у вас нет других проблем с разметкой: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

        <style type="text/css">
            html, body{
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .container {
                padding-top: 30px;
                width:148px;
            }
            #sidebar{
                margin: 0;
                width:148px;
                height:100%;
                overflow:auto;
                background: red;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <ul id="sidebar">
                <li>...</li>
            </ul>
        </div>
    </body>
</html>
0 голосов
/ 30 марта 2009

Идея состоит в том, чтобы иметь 30 пикселей на элементе, отличном от элемента высоты 100%, так как поле и 100% складываются вместе, чтобы создать конечную высоту элемента (и: 100% + 30 пикселей> 100%). Поместив отступ в содержащий div, вы можете получить тот же эффект.

Попробуйте это. 

<div id="container">
<div id="sidebar">
  <ul>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
  </ul>
</div>
</div>

div#container {
    padding-top:30px;
}
div#sidebar {
    width:148px;
    height:100%;
    overflow:auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...