个人中心
gpt4 book ai didi

javascript - 3 列布局，页眉和页脚位于中心列

转载 作者：行者123 更新时间：2023-11-28 13:03:46 24 4
gpt4 key购买 nike

我正在尝试让我的页面看起来像 Facebook Android 应用程序。该应用程序可以概括为具有 3 列布局，只有中央列具有标题(没有页脚，但根据我的要求，我还需要一个页脚)。

如下图所示

enter image description here

红色和蓝色的 div 是左侧边栏和右侧边栏。绿色和紫色的 div 是中心 div。紫色的 div 是页眉和页脚的 div，将分别粘在页面的顶部和底部。

还有一个要求是标题(顶部紫色)上有按钮来隐藏和显示左右侧边栏。最初只有中心的 div 是可见的，其余的可以在需要时调入 View 。到目前为止，这是我的代码。 (我无法获得中心 div 的宽度)

HTML 代码

<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
    <div id="leftBar" class="main">Left Bar</div>
    <div id="content" class="inner">
        <div id="header">Head</div>
        <div id="body">Body</div>
        <div id="footer">Footer</div>
    </div>
    <div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>

CSS

body{
margin: 0px;
}

div.inner{
height: 500px;
width: 50%;
background: red;
}

div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}

#leftBar{
float: left;
}

#content{
position: relative;
height: 100%;
float: left;
}

#rightBar{
float: right;
}

#header{
position: fixed;
top: 0px;
background: blue;
}

#body{
margin-top: 40px;
position: relative;
}

#footer{
position: absolute;
bottom: 0px;
}

我还在下面链接的 fiddle 中添加了 JavaScript 代码 http://jsfiddle.net/mv6Bj/1/

宽度应使中心 div 占满屏幕的 100% 宽度，当右/左切换进入图片时，它们应到达其位置并将中心 div 分别向左或向右推。这是按照标准的 Facebook 应用程序功能。

这些是我现在遇到的问题

  1. 中心的 div 不是 100%，也不会随着元素的出现和消失而缩放
  2. 中心 div 的高度不是 100%(它在 Chrome 上，但奇怪的是它不是在 JSFiddle 上)
  3. 当我点击左侧时，leftBar 消失，内容 div 向左移动，但标题 div 保持原样。

最佳答案

根据我的理解，我已经更新了 fiddle 。

Working Demo

我使用了 display:table 属性。可以引用this或 this 

html, body {
    margin: 0px;
    min-height:100%;
    height:100%;
}

#main {
    min-height:100%;
    display:table;
    width:100%;
    height:100%;
}

#leftBar, #rightBar {
    background: lime;
    width:100px;
    display:table-cell;
}

#content {
    min-height: 100%;
    display:table-cell;
    background: red;
}

#header {
    background: blue;
    height:10%;
}
#body {
 min-height:80%;
    overflow:hidden;
}
#footer {
 background: magenta;
height:10%;
}

希望这对你有用。

关于javascript - 3 列布局，页眉和页脚位于中心列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20781740/

24 4 0
文章推荐： ios - CoreData，executeFetchRequest，调用中的额外参数 "Error"
文章推荐： javascript - React Router 4. 获取事件路由
文章推荐： ios - 可选错误 Swift 1.2 到 2.0
文章推荐： javascript - 如何使用正则表达式仅提取匹配字符串的一部分？
行者123
个人简介

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

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