Question

以下是我的CSS＆amp;这里的HTML是我的fiddle，在标题中我使用50px高度，有没有什么方法我不需要在标题中添加高度，仍然布局应该适合所有页面

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

#page {
  height: 100%;
}

#header {
  height: 50px;
  background: yellow;
}

#content {
  height: calc(100% - 100px);
  background: grey;
  overflow: auto;
}

#footer {
  height: 50px;
  background: blue;
}

<div id="page">
  <div id="header">Header</div>
  <div id="content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 1

这可能对您有帮助，

 $(document).ready(function() {
    //Get the Outer height of the header
    var headerHeight = $('#header').outerHeight();
    //Add the same height to the content as padding top.    
    $('#content').css('padding-top', headerHeight); 
});

Answer 2

如果要在不指定行高的情况下垂直填充整个页面，可以使用flex。在这个示例中，页眉和页脚也是粘性的，这要归功于容器子项上的overflow: auto（以及容器本身上的overflow: hidden）。

body {margin:0;padding:0;}
#page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
#page>* {
    overflow: auto;  
}
#header {
    background-color: red;
}
#footer {
    background-color: red;
}
#content {
    background-color: lightgrey;
    flex:2;
}

<div id="page">
  <div id="header">Header</div>
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 3

当然不是。浏览器必须知道您希望它如何显示标题。如果在其他情况下标题可能会变长，则可以使用min-height属性而不是height。如果您遇到其他问题，我认为这是实现您的想法的更好方式。这是一个CSS代码：

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

#header {
    position: fixed;
    top:0;
    right:0;
    left:0;
    min-height: 50px;
    background: yellow;
}

#content {
    padding:100px 0;
    background: grey;
}

#footer {
    position: fixed;
    bottom:0;
    right:0;
    left:0;
    min-height: 50px;
    background: blue;
}

如果不添加标题高度，我们可以修复布局

3 个答案: