0

我想知道你们如何在 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',{});
4

2 回答 2

0

这就是我在 html 中的做法，我会在它周围添加一个包装器以使居中变得容易，但这只是我。我认为您想了解 css，老实说，有很多方法可以解决这个问题，简单的是：

.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;
}
于 2012-10-29T13:57:43.283 回答
0

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

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

和div.content overflow:hidden

于 2012-10-29T13:54:49.170 回答