Выпадающее меню продолжается в нижней части страницы

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

Это можно увидеть here. Когда нажата кнопка меню, вы можете прокручивать. Я хочу, чтобы боковая панель была только до тех пор, пока страница не изменяла длину страницы.

Мой код выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing My HTML and CSS</title> 
    <style> 

     * { 
      padding: 0; 
      margin: 0; 
     } 

     body .sidebar { 
      display:block; 
     } 

     body.loaded .sidebar { 
      display:none; 
     } 

     .header { 
      background-color: black; 
      height: 100px; 
      width: 100%; 
      text-align: center; 
      line-height: 2; 
      color: white; 
     } 

     .sidebar { 
      background-color: #ebebeb; 
      position: absolute; 
      width: 200px; 
      height: 100%; 
      padding-top: 10px; 

     } 

     .sidebar li { 
      color: black; 
      list-style-type: none; 
     } 

     .sidebar li a { 
      text-decoration: none; 
      margin-left: 30px; 
      margin-top: 30px; 
      padding-top: 10px; 
     } 

     .content { 
      padding:10px; 
      padding-bottom:30px; 
      padding-top: 50px; 
      padding-left: 250px; 
     } 

     #menu-btn { 
      background-image: url(http://i.imgur.com/cT9D02u.png?1); 
      float: left; 
      height: 48px; 
      width: 44px; 
      margin-left: 50px; 
      margin-top: -35px; 
     } 

     .footer { 
      width:100%; 
      height:30px; 
      position:absolute; 
      text-align: center; 
      bottom:0; 
      left:0; 
     } 

    </style> 
    <script src="js/jquery.min.js"></script> 
</head> 
<body> 
    <div class="header"> 
     <h1>Hello, World!</h1> 
     <div id="menu-btn"></div> 
    </div> 
    <div class="sidebar"> 
     <li><a href="#">Hello</a></li> 
     <li><a href="#">This</a></li> 
     <li><a href="#">Is</a></li> 
     <li><a href="#">Just</a></li> 
     <li><a href="#">A</a></li> 
     <li><a href="#">Test</a></li> 
    </div> 
    <div class="content"> 
     <p>Hello, World</p> 
    </div> 
    <div class="footer"> 
     <p>Hello</p> 
    </div> 

    <script> 
     $(function() { 
      $('body').addClass('loaded'); 
     }); 

     $("#menu-btn").on("click", function(){ 
      $(".sidebar").slideToggle(600); 
     }); 
    </script> 
</body> 
</html>

Я использую JQuery 2.1.3.

Спасибо, erip

источник

2015-03-02 erip

.sidebar { 
    ... 
    /* height: 100%; */ 
    top: 100px; 
    bottom: 0; 
}

Demo

источник

2015-03-02 21:50:59 isherwood

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

Да. Понял. См. Демонстрацию. – isherwood

Демонстрация - это то, что я хочу. Спасибо! – erip

.sidebar { 
     background-color: #ebebeb; 
     position: absolute; 
     width: 200px; 
     //height: 100%; 
     top: 100px; 
     bottom: 0; 
     padding-top: 10px; 

    }

https://jsfiddle.net/lemoncurry/6g7e5pf8/

источник

2015-03-02 22:01:13

Выпадающее меню продолжается в нижней части страницы

ответ

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