Пожалуйста, дайте мне шаблон HTML / CSS с липким верхним и нижним колонтитулом и липким содержимым

Question

Легко реализовать одностраничный html с липким заголовком, липким нижним колонтитулом и прокручиваемым контентом.

Но я разделил свой контент на две части.Левая часть - это меню (или панель навигации), и я хочу, чтобы оно было прокручиваемым.

как

header
---------------------
       |
       |
 scrol | other
 lable | content
       |
       |
---------------------
footer

html как

<div class="box">
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

Я надеваюне знаю, как заставить .left быть прокручиваемым.

То, что я пробовал:

.box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content {
    flex-grow: 1;
    /*overflow: auto;*/
}
.left {
    overflow: auto;
}

Если я добавлю overflow: auto; к .content, полоса прокрутки прокрутит все содержимое div.

Если я добавлю *От 1020 * до .content, полоса прокрутки не отображается на .left div, и высота 100% даже не работает.Полоса прокрутки появляется на всем html.

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

Я прочитал несколько ответов о «занять оставшееся место» и т. Д., Но не получил ответа, поэтому я спрашиваю здесь.Спасибо за помощь.

Answer 1

Вот решение, где .content является строкой flexbox и имеет overflow: hidden, тогда как .left имеет overflow: auto

html,
body,
.box {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: silver;
}

.content {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.header {
  background: tomato;
}

.footer {
  background: teal;
}

.left {
  background: lime;
  width: 30%;
  height: 100%;
  overflow: auto;
}

.right {
  flex-grow: 1;
  background: navy;
  color: white;
}

<div class="box">
  <div class="header">
    <h1>.header</h1>
  </div>
  <div class="content">
    <div class="left">
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>

      </ul>
    </div>
    <div class="right">
      <p>
        .right
      </p>
    </div>
  </div>
  <div class="footer">
    <h6>.footer</h6>
  </div>
</div>

Answer 2

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

html,
body{
  height: 100%;
  width: 100%;
}
.header,
.footer{
  height: 50px;
  background: yellow;
}
.box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.left {
    overflow: auto;
    width: 120px;
    height: 100%;
    background: red;
    color: #fff;
}
right{
    width: calc(100% - 120px);
}

<div class="box">
    <div class="header">Header</div>
    <div class="content">
        <div class="left"> Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content </div>
        <div class="right"> Right Content </div>
    </div>
    <div class="footer">Footer</div>
</div>

Answer 3

.content{
            display: flex;
        flex-direction: row;
        }
        .header, .footer{
            width: 100%;
            position: fixed;        
            background: #333;
            padding: 10px 0;
            color: #fff;
        }
        .header{
            top: 0;
        }
        .footer{
            bottom: 0;
        }  
        .left,.right{width: 50%;
        }
        .left{
          height: 200px; overflow-y:auto;
        }
        
         p{
            line-height: normal; 
        }

    <div class="header">
            header
        </div>
        <div class="content">
            <div class="left">
              <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
                 <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
              </ul>
            </div>
            <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
            
            </div>
        </div> 
        <div class="footer">
            Copyright &copy; 2016 Your Company      
        </div>

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

Answer 4

body{        
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    .header, .footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 10px 0;
        color: #fff;
    }
    .header{
        top: 0;
    }
    .footer{
        bottom: 0;
    }    
    /* Some more styles to beutify this example */
    
     p{
        line-height: 200px; /* Create scrollbar to test positioning */
    }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Fixed Header and Footer with CSS</title>

</head>
<body>
    <div class="header">
        header
    </div>
    <div class="container">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>    
    <div class="footer">
        Copyright &copy; 2016 Your Company      
    </div>
</body>
</html>