позиция: фиксированная - контент исчезает при увеличении - PullRequest
Новая
       4

позиция: фиксированная - контент исчезает при увеличении

3 голосов
/ 05 ноября 2011

прошел учебник http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ и попытался сделать то же самое, чтобы создать фиксированную верхнюю панель (точно так же, как Facebook, twitter, techCrunch и любые другие популярные сайты), но панель не работает в ZOOM.

Вот пример того, что я имею в виду - http://rtabl.es/designingforstartups - если вы увеличите эту ссылку, вы увидите, что содержимое справа исчезает с экрана.Со мной происходит то же самое, и я не хочу, чтобы содержимое исчезало при увеличении.

Вот тестовый код, следовал учебному руководству и дал контейнеру position:fixed, а содержимое имеет position:relative сfloat:left - интересно, где я иду не так.

Код - 

        <html>
    <style type="text/css">
    #Contianer{
    position: fixed;
    height: 35px;
    width: 100%;
    z-index: 9999;
    color: white;   
    background-color: #474747;
    }
    .x{
    float: left;
    text-align: center; 
    position: relative;
    line-height: 35px;
    border:1px solid white;
    }
    #a{
    width:20%;
    text-align: left;
    min-width: 100px;
    }
    #b{
    width:20%;
    min-width: 100px;
    text-align: left;
    height: 35px;
    display: table-cell;
    } 
    #c{
    min-width: 200px;
    width:40%;
    }
    #d,#e{
    min-width: 50px;
    width:10%;
        }
    body{
    border:0;
    margin: 0;
    }

    </style>
    <body>
    <div class="Contianer" id="Contianer">
    <div id="a"  class="x">
        foo
    </div>
    <div id="b" class="x">
        bar
    </div>
    <div id="c" class="x">
        tom 
    </div>
    <div id="d" class="x">
        jerry
    </div>          
    <div id="e" class="x">          
        Out
    </div>
    </div>

    </body>

Ответы [ 4 ]

1 голос
/ 27 мая 2012

Вы можете использовать Javascript, чтобы исправить это, а для лучших практик вы можете использовать div, чтобы обернуть контейнер с абсолютной позицией, и div внутри контейнера, чтобы поместить содержимое.

Javascript 

$(windows).resize(function(){
        if ($(window).width() < $('.content').width()){
            $('.container').css('position', 'static');
        }
        else{
            $('.container').css('position', 'fixed');
        }
    });
1 голос
/ 06 ноября 2011

После того, как мы остановились на этой проблеме, наконец-то нашли решение - благодаря сообществу stackoverflow !! .. вот ссылка (опубликовал еще один вопрос, так как этот вопрос не приносит результатов)

невозможно получить прокрутку, когда положение: фиксировано - элементы исчезают с экрана

0 голосов
/ 05 ноября 2011

Проблема в любой фиксированной ширине (даже min-widths).Все должно быть в процентах (гибкий) или, по крайней мере, учитывать некоторые незначительные фиксированные ширины.Так что в вашем примере, если я уменьшу процентное содержание некоторых элементов, чтобы учесть границы 1px, и исключу минимальную ширину, я не получу проблему (однако, на маленьком экране это ударяет поплавки),Вот ваш модифицированный код: 

#Contianer{
position: fixed;
min-height: 35px;
width: 100%;
z-index: 9999;
color: white;   
background-color: #474747;
}
.x{
float: left;
text-align: center; 
position: relative;
line-height: 35px;
border:1px solid white;
}
#a{
width:19%; /*downsized to give room for fixed width borders*/
text-align: left;

}
#b{
width:19%; /*downsized to give room for fixed width borders*/

text-align: left;
height: 35px;
display: table-cell;
} 
#c{

width:40%;
}
#d,#e{
min-width: 50px;
width:10%;
    }
body{
border:0;
margin: 0;
}
0 голосов
/ 05 ноября 2011

Ваш контейнер имеет 100% ширины, и ваши контейнеры элементов также принимают 20 + 20 + 40 + 10 + 10 = 100%.Теперь при увеличении не будет свободного пространства для расширения, поэтому вам нужно указать ширину этих элементов.

РЕДАКТИРОВАТЬ: «но содержание учебника остается», это фоновое изображение на телеэлемент.

...