Question

我想知道你们是如何在html中制作标题侧主页脚布局的。

像这样：

<html>
  <div class="header"></div>
  <div class="content">
    <div class="side"></div>
    <div class="main"></div>
  </div>
  <div class="footer"></div>
</html>

div.header和div.footer具有固定的高度。并且div.content将保持所有其余高度，没有身体的滚动条。

div.side将具有固定宽度，div.main将保留所有其余宽度。

div.side可以有y滚动条。

当窗口调整大小时，div.content将展开以固定高度，无滚动条。

顺便说一句，有时候div.side和div.main可以像这样交换位置：

<html>
  <div class="header"></div>
  <div class="content">
    <div class="main"></div>
    <div class="side"></div>
  </div>
  <div class="footer"></div>
</html>

如何制作？

更新

div.main不能作为溢出：隐藏，因为它是我用来停止地图的容器。

var map=new google.maps.Map('main',{});

Answer 1

给div.side一个高度和宽度然后overflow:scroll 像：

div.side{
height:60%;
width: 60%;
overflow: scroll;
}

和div.content overflow:hidden

Answer 2

这就是我在html中做的方式，我会在它周围添加一个包装器以使对中变得容易，但这只是我。我想你想知道关于css的问题，而且对于hones来说，有很多方法可以解决这个问题，简单来说就是：

.header {
    width:whateverpx;
    margin:0 auto;
}
.content {
    width:100%;
    position:relative;
}
.content:after {
    clear:both;
    content:"";
    display:none;
}
.side {
    float:left;
    position:relative;
    width: your width for it;
}
.main {
    float:left;
    position:relative;
}
.footer {
    height: whateverpx;
    width: whateverpx;
    margin:0 auto;
}

并且，如果您希望以内容为中心，请在其周围添加包装并添加

.wrapper {
    width:whatever;
    marging:0 auto;
}

或

没有包装，请为.content执行此操作

.content {
    width: whatever
    margin:0 auto;
    position:relative;
}

你如何制作header-side-mainlayout

2 个答案: