Сохраните раздел, прикрепленный к окну браузера

Я пытаюсь сохранить div, прикрепленный к окну браузера при прокрутке содержимого, но я просто не могу заставить его работать.Сохраните раздел, прикрепленный к окну браузера

Вот что я собираюсь на до сих пор:

HTML

<section id="adminpanel"> 
     <!--Drop down--> 
     <!--Button--> 
     <!--Drop down--> 
     <!--Button--> 
     <!--Drop down--> 
     <!--Button--> 
</section> 
<!--This is the content section--> 
<div class="content"> 
    <div id="accounts"> 
     <!--content--> 
    </div> 
    <div id="facilities"> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
    </div> 
</div> 
<footer> 
    <p>Copyright &copy</p> 
</footer>

CSS

html, body { 
    height:100%; 
    min-height: 100%; 
    background-color:grey; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#adminpanel { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:100%; 
    width:15%; 
    float:left; 
} 
.content { 
    position: relative; 
    width:85%; 
    min-height: 100%; 
    float:left; 
    background-color:silver; 
    margin-bottom: 60px; 
} 
footer { 
    text-align:center; 
    position: fixed; 
    padding:5px; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    background: #999999; 
}

Вот JSFiddle демонстрации, где я нахожусь до сих пор.

Я попытался установить position: fixed; на #adminpanel, но это, похоже, все испортит, любая помощь будет принята с благодарностью.

источник

2015-05-06 Zoxac

Что вы имеете в виду, что, кажется, натворить? Вы хотите, чтобы он был там, где он был слева, но никогда не двигался? –

Похоже, это работает для меня. Я предполагаю, что «перепутанная» часть заключается в том, что остальная часть вашего контента меняется всякий раз, когда вы применяете «position: fixed» к '# adminpanel'? Кроме того, вам нужно будет применить z-index больше, чем элемент '.content', чтобы отобразить' # adminpanel'. [Пример] (https://jsfiddle.net/fxvexogc/). –

https://jsfiddle.net/or9vkxuu/1/

#adminpanel { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:100%; 
    width:15%; 
    float:left; 
    position:fixed; 
} 
.content { 
    position: relative; 
    width:85%; 
    min-height: 100%; 
    float:left; 
    background-color:silver; 
    margin-bottom: 60px; 
    margin-left: 15%; 
}

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

источник

2015-05-06 18:46:17 pabgaran

А, ок, это то, чего мне не хватало - установка поля - левая до той же ширины. Спасибо, это то, что мне нужно. – Zoxac

В некоторых браузерах вам необходимо назначить display: block семантическим элементам html5, таким как article, nav, footer, section, etc...

Так с display: block и position: fixed он отлично работает для меня.

источник

2015-05-06 18:41:41 Alex

-1

DEMO: https://jsfiddle.net/or9vkxuu/2/

<!DOCTYPE html> 
<head> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0px; 
     } 

     #adminpanel { 
      line-height: 30px; 
      background-color: #eeeeee; 
      height: 100%; 
      width: 15%; 
      float: left; 
     } 

     .content { 
      width: 85%; 
      min-height: 100%; 
      float: left; 
      background-color: silver; 
      margin-bottom: 60px; 
     } 

     footer { 
      text-align: center; 
      position: fixed; 
      padding: 5px; 
      left: 0px; 
      bottom: 0px; 
      width: 100%; 
      background: #999999; 
     } 
    </style> 
</head> 

<body> 
<section id="adminpanel"> 
    <p> Left Admin panal</p> 
    <!--Drop down--> 
    <!--Button--> 
    <!--Drop down--> 
    <!--Button--> 
    <!--Drop down--> 
    <!--Button--> 
</section> 
<!--This is the content section--> 
<div class="content"> 
    <div id="accounts"> 
     <!--content--> 
    </div> 
    <div id="facilities"> 
     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 

     <p>test</p> 
    </div> 
</div> 
<footer> 
    <p>Copyright &copy</p> 
</footer> 
</body> 
</html>

источник

2015-05-06 18:58:17

Это именно то, что у меня уже есть ..? – Zoxac

Сохраните раздел, прикрепленный к окну браузера

ответ

Смежные вопросы