Question

这似乎是如此基本，但每个人都有一个圆满的方式，我永远无法得到一个干净和有效的解决方案。

我想要的设计是：

左列的最小宽度为640px，右列为流体。页脚总是在底部，2列总是一直扩展到页脚。

我应用的技术是一个绝对的页脚，然后试图让2列相等的各种技术是高度，但我无法弄清楚如何让它们一直扩展到页脚。 / p>

CSS必须与IE10兼容（但首选IE9）

这是我的尝试，其中他的列不适合100％的高度，并且还使用页眉和页脚调整浏览器的大小。我想要它，所以如果浏览器宽度低于1280px那么它应该得到滚动条

if listado:
    valores=df2.values
    for i in range(len(listado)):
        df1[listado[i]]=df1[listado[i]]*valores
 return df1

Answer 1

如果你想设置100％的身高，你需要一个父母和一个孩子，在这种情况下，身体是父母，所以让我们从那个开始

body, html {
    width: 100%;
    height: 100%;
}

HTML

<header></header>
<main>
  <aside></aside>
  <section></section>
</main>
<footer></footer>

CSS

body, html {
  width: 100%;
  height: 100%;
}
header {
  background-color: red;
  height: 50px;
}

main {
  background-color: blue;
  height: 100%;
  width: 100%;
  padding-left: 680px;
  position: relative;
}

main aside {
  width: 680px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: peru;
}

footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  background-color: green;
  width: 100%;
}

然后你定义了一些不必要的div和CSS类。基本上，诀窍在于身体和HTML，我希望这种方法适合你。

Pen With Solution

Answer 2

如果要涉及IE9，那么display:table;仅保留在一个位置：绝对。

例如

＆＃13;

html,
body,
.wrapper,
.tble {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

.wrapper,
.tble {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}

.tbcell,
.content,
.left-sidebar {
  display: table-cell;
}
header,
footer,
.middle {
  display: table-row;
  height: 0;
  background: lightblue;
}
.container,
aside,
main {
  padding: 1em;
}
.middle {
  height: 100%;
  background: lightgreen;
}
.tble {
  direction: rtl;
  border-top: solid;
  border-bottom: solid;
}
.tble > * {
  direction: ltr;
}
aside {
  border-right: solid;
  width: 648px;
  background:pink
}

＆＃13;

<div class="wrapper">
  <header class="header">
    <div class="container tbcell">header<br/> of any heights</div>
  </header>
  <!-- .header-->
  <div class="middle">
    <div class="container tble">
      <main class="content">content</main>
      <!-- .content -->
    <!-- .container-->
    <aside class="left-sidebar">
      <nav class="nav">nav on <b>left</b>-sidebar</nav>
    </aside>
    <!-- .left-sidebar -->
    </div>
  </div>
  <!-- .middle-->
  <footer class="footer">
<div class="container tbcell">footer<br/> of any heights</div>
</footer><!-- .footer -->
</div>
<!-- .wrapper -->

＆＃13;

IE8也应该了解表格布局显示。 https://codepen.io/gc-nomade/pen/dVVEOO

带有页眉和页脚的2列布局

2 个答案: