javascript - 不向标题添加高度我们可以修复布局吗

Question

下面是我的 CSS & 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); 
});