Question

我有一个我想写的页面。我想要一个页眉，页脚三列20％60％20％。我正在尝试使用html5。这段代码适用于Firefox，但IE的div标签位于底部。并且左边是圈数，chrome显示底部的div。我无法弄清楚我做错了什么。示例是here。

 <html>
    <header>...</header>
    <section>
    <nav>buttons below the header not to exceed 20% align left
    </nav>
    <div>
    </div>
    <style>
    header {
    background-color:#744626;
    color:#41200b;
    text-align:center;
    padding:0px;
    height:186px;
   }
    nav {
    line-height:30px;
    background-color:#fbf2dc;
    height:1947px;
    width:200px;
    float:left;
    padding:10px;
    }
    section {
    width:600px;
    float:left;
    padding:10px;
    background-color:#fbf2dc;
    height:2000px;
    vertical-align:top;
    }
    aside{
    width:300px;
    float:right;
    padding:0px;
    background-color:#fbf2dc;
    height:2000px;
    }
    footer {
    background-color:#fbf2dc;
    color:#41200b;
    clear:both;
    text-align:center;
    padding:5px;
    }
    body {
    background-color:#fbf2dc;
    color:#41200b;
    }
    img {
    display: block
    }
    .Normal-C17
    {
    font-family:"Trebuchet MS", sans-serif; font-weight:700; 
    font-size:15.0px; line-height:30px; color:#0000ff; 
    text-align:center;
    }
    table{
    border-collapse: collapse;
    }
    table, th, td{
    border: 1px solid #744626;
    }
    </style>
    </section>
    <aside>s</aside>
    <footer>be centered and be the bottom 10% of page</footer>
    </html>

Answer 1

您可以尝试流体布局功能。链接CSS文件下面的高度可定制。它具有良好的功能，其中网页可以在移动设备，平板电脑或桌面中进行调整，即响应。

试一试并自定义，我刚上传了它们。（如果之前未在Adobe Dreamweaver中使用过流体功能。）

指向styles.css文件：https://www.dropbox.com/s/8r5pb2uvexf0nw9/styles.css?dl=0

链接到boilerplate.css文件：https://www.dropbox.com/s/rzy6w848s0ndedi/boilerplate.css?dl=0

我希望以上步骤可以帮助您

无法使用css的html5与所有浏览器一起使用

1 个答案: