个人中心
gpt4 book ai didi

html - 将页眉页脚和内容添加到拆分布局

转载 作者：行者123 更新时间：2023-11-28 05:56:44 24 4
gpt4 key购买 nike

我想像这样向这个拆分布局添加页眉和页脚: pic1

当我添加这段代码时:

<style type="text/css">
body {
margin:0;
padding:0;
}
div#header{
width:100%;
height:65px;
position:fixed;
z-index:100;
background-color:#F00;
 } 

div#footer{
width:100%;
height:65px;
position:fixed;
bottom:0;
background-color:#06F;
}
div#content{
background-color:#111;
width:100%;
height:100%;
position:absolute;
    }
</style>
<body>
<div id="container">
    <div id="header">
        <?php include 's/header.php';?>
    </div>
    <div id="content">
    <?php include 'index.html';?>
    </div>
    <div id="footer">
        <?php include 's/footer.php';?>
    </div>
</div>
</body>

只有在不在分屏中单击后，我才有页眉和页脚: pic2

最佳答案

我改变内容如下

<div id="content">
  <div id="columns-container">
    <div class="column column-a"></div>
    <div class="column column-b"></div>
  </div>
</div>

并添加跟随的CSS

#columns-container {
  position:relative;
  height: 100%;
  width: 100%;
}
.column {
  position: absolute;
}
.column-a {
  background-color: green;
  top: 0;
  bottom: 0;
  right: 50%;
  left: 0;
}

.column-b {
  background-color: yellow;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
}

在这个 URL 上有一个工作示例

https://jsfiddle.net/vfh2ma1x/

关于html - 将页眉页脚和内容添加到拆分布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37027353/

24 4 0
文章推荐： html按钮多行对齐
文章推荐： ios - collectionView cellForItemAt 没有被调用
文章推荐： ios - 如何在 ScrollView 中制作表格 View ？
文章推荐： c++ - 单例类和多重继承
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com