堆栈内存溢出
  繁体   English   中英

3行CSS div设计

[英]3 row CSS div design

 原文  2012-11-23 07:46:49  7   10    css/ html

问题描述

我想在行设计中制作3个div。 页眉和页脚具有固定高度的位置。 中心div扩展以填补空白空间。 我试过但最接近的是下面的代码。 仍然有中心div的问题，扩大了页脚div。

HTML： 

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

CSS： 

#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

在此输入图像描述

10 个解决方案

解决方案1
 2 已采纳  2013-04-06 12:10:56

三排纯CSS

我知道这篇文章有点过时了，但尽管有相反的说法，你可以用CSS简单地做到这一点。 不需要JavaScript，jQuery，CSS 3 hacks等。

这里有几个显示固定页眉和页脚以及动态主体div的jsf。

这第一个显示固定的像素高度的页眉和页脚和动感的车身完全按照你在你想要的形象

http://jsfiddle.net/LBQ7K/ 

<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>

html, body, {
height: 100%;
}

.header {
position:   absolute;
top:    0px;
height:     50px;
width:      100%;
background: #f00;
}

.footer {
position:   absolute;
bottom: 0;
height:     50px;
width:      100%;
background: #00f;
}

.cssBody {
position:   absolute;
top:    50px;
bottom: 50px;
width:  100%;
background: #0f0;
}

第二个显示您可以使用相同的技术来获得动态页眉和页脚。 http://jsfiddle.net/reqXJ/ 

    <body>
    <div class="header"><p>Header</p></div>
    <div class="cssBody"><p>Hello World</p></div>
    <div class="footer"><p>Footer</p></div>
</body>

html, body, {
    height: 100%;
}

.header {
    position:   absolute;
    top:        0px;
    height:     15%;
    width:      100%;
    background: #f00;
}

.footer {
    position:   absolute;
    bottom:     0;
    height:     15%;
    width:      100%;
    background: #00f;
}

.cssBody {
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      100%;
    background: #0f0;
}

解决方案2
 1  2012-11-23 07:51:53

这是一个非常常见的问题，对我有用的解决方案之一来自以下网站：

http://ryanfait.com/sticky-footer/

用代码：

http://ryanfait.com/sticky-footer/layout.css

另一个受欢迎的选择：

http://www.cssstickyfooter.com/

如果这不符合您的需求，请告诉我们，我们可以提供更多帮助。

解决方案3
 1  2012-11-23 08:16:57

好像你试图做一个粘性页脚，好吧......你需要一些黑客：

HTML： 

<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

CSS 

.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

注意：更换页脚并将高度推到固定高度，并且不要忘记在容器中的行之后插入push div。

解决方案4
 0  2012-11-23 07:52:48

你可以通过绝对定位行来伪造它，并为中间行添加填充到顶部和底部。 你不能像使用表那样做 

#container { position:relative; height:800px } // needs height

#rowOne, #rowTwo, #rowThree { position:absolute }

#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }

#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px

解决方案5
 0  2012-11-23 08:02:06

这行代码能帮忙吗？ DEMO

尝试这个： 

#container{
   ...
   position:relative;
}
#content{
   min-height: xxx;
}

解决方案6
 0  2012-11-23 08:12:43

这应该完全符合你的要求：

HTML代码： 

<div id="header">
    header
</div>
<div id='container'>
    <div id='rowOne'>one</div>
    <div id='rowTwo'>two</div>
    <div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
    footer
</div>

CSS代码： 

.clearfix {
    clear: both;
}
#header, #footer {
    background-color: red;
}
#container {
    width: 100%;
}
#rowOne {
    width: 25%;
    background: green;
    float: left;
} 
#rowTwo {
    width: 55%;
    height: 100px;
    background: limegreen;
    float: left;
}
#rowThree {
    width: 20%;
    background: green;
    float: left;
}​

你也可以在jsFiddle上测试它

解决方案7
 0  2012-11-23 09:06:59

您是否尝试过查看CSS框架？ 它们带有默认类，您可以在短短几分钟内设置类似的东西。 它们还有助于生成更清晰的html和界面，您可以在以后轻松重新设计。

http://twitter.github.com/bootstrap/index.html

解决方案8
 0  2012-11-23 09:45:06

我希望你看起来像这样： - DEMO

CSS 

#container {
    height: 100%;
}

#rowOne {
    height: 50px;
    background: green;
    position:fixed;
    left:0;
    right:0;
}
#rowTwo {
    background: limegreen;
    min-height:500px;
    position:absolute;
    left:0;
    right:0;
    top:50px;
}
#rowThree {
    position: fixed;
    background: green;
    bottom:0;
    left:0;
    right:0;
    height:50px;
}

HTML 

<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

解决方案9
 0  2012-11-23 09:59:45

一种方法是使用Jquery将中间div的最小高度设置为屏幕的高度，减去其他两个div（100px）的高度，这样的东西应该工作： 

$(document).ready(function() {

    var screenHeight = $(document).height() - 100px;

    $('#rowTwo').css('min-height' , screenHeight);

});

解决方案10
 0  2012-11-29 02:47:07

回应您对jedrus07的回答的评论：

所有这些解决方案扩展了页脚div后面的中心div。 我想要一个解决方案，每个div只有自己的空间。

唯一的方法是使用CSS 3 calc（）。 如果您不需要支持很多浏览器，那么这是一个选项，以下是它的实际演示：

http://jsfiddle.net/5QGgZ/3/

（使用Chrome或Safari。）

HTML： 

<html>
  <body>
    <div id='container'>
      <div id='rowOne'>row 1</div>
      <div id='rowTwo'>row 2</div>
      <div id='rowThree'>row 3</div>
    </div>
  </body>
</html>

CSS： 

html, body, #container {
  height: 100%;
}
#rowOne {
  height: 50px;
  background: #f00;
}
#rowTwo {
  height: -webkit-calc(100% - 100px);
  background: #0f0;
}
#rowThree {
  height: 50px;
  background: #00f;
}

如果你想要更广泛的浏览器支持，你将不得不采用像jedrus07提到的粘性页脚解决方案，或Tom Sarduy的答案。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS div响应式设计 响应式设计中的CSS Div覆盖 需要输入 css 来设计一个 div 在div中连续填充div（css） 在CSS中显示和隐藏div行 在CSS中将Div行转换为列 像div这样的新闻提要的CSS和html设计 HTML CSS设计：div的大小不断增加 越来越多的html div CSS设计模板。 CSS div设计nth-child
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM