фиксированная позиция не работает - PullRequest
2 голосов
/ 10 августа 2011

Не уверен, почему верх и низ установлены на 0px; но при использовании Opera 11.50, затем свернув Opera и затем снова открыв ее из меню задач, происходит некий элемент div с верхним и нижним 0px, который продолжает показывать некоторое пустое пространство внизу, если вы измените размер окна, все в порядке, но делаете сворачивание программы и ее открытие до полного размера портит положение: абсолютный элемент.

Вот код, который может кто-нибудь сказать мне, почему это происходит и как я могу это исправить.

#Panel {
background-color: #fff;
border-right-color: #cdcdcd;
border-right-style: solid;
border-right-width: 1px;
bottom: 0px;
box-shadow: 0px 0px 5px #1b1b1b;
left: 0px;
position: fixed;
text-shadow: 0px 1px 0px;
top: 0px;
width: 280px;
z-index: 3;
}

JSFiddle: http://jsfiddle.net/PcrUB/1/ <- полный код + другие </p>

1 Ответ

0 голосов
/ 14 августа 2011

Если я правильно понимаю, вы хотите, чтобы панель была в полный рост - чтобы она постоянно растягивалась сверху вниз? Пока контент сидит вправо и прокручивается? Я немного догадываюсь, так что извините, если вы не пытаетесь это сделать ...

Хотя я думаю, что проблема position: fixed может быть ошибкой Opera, вы можете избежать ее, изменив ее на position: absolute. Похоже, что дает тот же результат без ошибки.

Этот тестовый пример работает в Opera 11.5, IE9, FF5, Chrome 13:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Page Title</title>
    <style>
    body { background: #cdcdcd; overflow: hidden; }
    #Panel {
        background: #fff;
        border-right: 1px solid #cdcdcd;
        box-shadow: 0px 0px 5px #1b1b1b;
        text-shadow: 0px 1px 0px;

        position: absolute;
        top: 0px;
        right: 280px;
        bottom: 0px;
        left: 0px;

        width: 280px;
    }

    #Content { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 285px;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div id="Panel">
         <div id="Panel_Logo"></div>
        <p>panel</p>    
    </div>
    <div id="Content">
         <div id="Content_Header"></div>
         <p style="height: 2000px;">Forced-height paragraph to induce scrolling.</p>
         <p>end</p>
    </div>
</body>
</html>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...