如何实现这种CSS布局？_Css_Layout

如何实现这种CSS布局？

css layout

如何实现这种CSS布局？,css,layout,Css,Layout,我不太擅长用文字描述这个问题，所以我画了一幅小图，上面有布局应该具备的属性我尝试了几种可能性，但如果没有绝对定位和FlexBox，我无法实现这一点。我也不太熟悉css黑客有没有人能为这种类型的布局提供一个只支持CSS和IE9+兼容性（如果可能的话是IE8）的解决方案提前感谢这很简单 HTML 这是我的解决方案，祝你好运，兄弟，欢迎来到前端世界 HTML: 你的密码在哪里？你试过什么？您遇到了什么问题？创建此布局有多种可能性，但是您需要向我们展示您尝试了什么。我们不是免费的代码编写服务。

我不太擅长用文字描述这个问题，所以我画了一幅小图，上面有布局应该具备的属性

我尝试了几种可能性，但如果没有绝对定位和FlexBox，我无法实现这一点。我也不太熟悉css黑客

有没有人能为这种类型的布局提供一个只支持CSS和IE9+兼容性（如果可能的话是IE8）的解决方案

提前感谢

这很简单

HTML

这是我的解决方案，祝你好运，兄弟，欢迎来到前端世界

HTML:

你的密码在哪里？你试过什么？您遇到了什么问题？创建此布局有多种可能性，但是您需要向我们展示您尝试了什么。我们不是免费的代码编写服务。感谢您的时间和努力。我使用Gilberto的anwser，因为它使sidenav灵活，没有指定%的宽度，并且不使用表格进行对齐。

<header>
</header>

<section>

  <aside>
  </aside>

  <article>
  </article>

</section>

<footer>
</footer>

footer,
header {
  width: 100%;
}
section {
  width: 100%;
}
section:after {
  display: table;
  content: '';
  clear: both;
}
aside {
  width: 30%;
  float: left;
}
article {
  width: 60%;
  float: right;
}

<body>
    <div class="wrapper">
        <div id="header"></div>
        <div id = "content">
            <div class="sidenav"></div>
            <div class="info"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    min-height:100%;
    position:relative;
}

#header {
    position: fixed;
    top: 0;
    z-index: 9999;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    height: 4em;
    background: navy;
}

#footer {
    width: 100%;
    height: 4em;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: pink;
}

#content {
    width: 100%;
    height: 2000px;
    display: inline-block;
    padding-top: 4em; /*same height header*/
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 4em;
    /* or:
    padding: 4em 0 4em 0;
    margin: 1em 0 1em 0;
   */
}

.sidenav {
    float:left;
    width:500px;
    height: 100%;
    background-color: gray;
    margin-right: 1em;
}

.info {
    overflow:hidden;
    height: 100%;
    background-color: purple;
}