堆栈内存溢出
  简体   繁体   English

简单的css高度

[英]simple css height

 原文  2011-02-16 04:06:07  9   2    html/ css/ cross-browser

问题描述

Got stuck while trying to make an element in website behave like this: 试图在网站中制作元素时遇到困难： 

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="content">long text with scrolling content</div>
  <div class="footer">fixed bottom</div>
</div>

Quick reminder of css height: 快速提醒css高度：

  • The percentage is calculated with respect to the height of the generated box's containing block. 百分比是根据生成的框的包含块的高度计算的。
  • If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box<...> 如果它具有块级子级，则高度是最顶层块级子框的顶部边缘之间的距离<...>
  • However, if the element has a non-zero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child<...> 但是，如果元素具有非零顶部填充和/或顶部边框，或者是根元素，则内容从最顶层子节点的上边距边缘开始<...>

Optimistic solution was: 乐观的解决方案是： 

.for100procHeight { height: 100%; }
.header, .footer { height: 20px; }
.content { height:100%; overflow:scroll; }
/* failed badly: footer didn't fit into the window (heightwise) */

With diminished optimism another attempt was made: 随着乐观情绪的减弱，又做了一次尝试： 

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="footer">fixed bottom</div>
  <div class="wrapper">
    <div class="content">long text with scrolling content</div>
  </div>
</div>

.for100procHeight { height: 100%; }
.header, .footer { position: absolute; height: 20px; }
.content { height:100%; overflow:scroll; }
.header { top: 0px; left: 0px; }
.footer { bottom: 0px; left: 0px; }
.wrapper { padding-top: 20px; padding-bottom: 20px; }
/* failed badly: scroll down arrow was behind footer */
/* failed badly: scroll down arrow didn't fit into the window (heightwise) */

This looks almost as it should except that height is 100% of browser window (causing bottom of element to be outside of visible area) . 除了高度是浏览器窗口的100％ （导致元素的底部在可见区域之外）之外，它看起来几乎应该如此。 Margins/Paddings/Wrappers/etc don't change that. 边距/填充/包装/等不会改变它。

I have looked at Complex height in CSS however JS support on client/element height looks even more fascinating. 我已经看过CSS中的复杂高度，但客户端/元素高度的JS支持看起来更加迷人。

Edit: 编辑：

Copy paste from complex-height-in-css with extension 使用扩展名从complex-height-in-css复制粘贴 

---------------------------------------
| fixed top |   | fixed top |        |
|-----------|   |-----------|        |
|  long   |^|   |  long   |^|        |
|  text   |_|   |  text   |_|        |
|  with   |_|   |  with   |_|        |
|scrolling| |   |scrolling| |        |
| content | |   | content | |        |
|-----------|   |-----------|        |
| fixed bott|   | fixed bott|        |
--------------------------------------

i realize having two of those was not mentioned, but neither was having <div class="for100procHeight"> as entire page content. 我意识到有两个没有被提及，但是没有将<div class="for100procHeight">作为整个页面内容。

Solution: 解： 

<html>
<head>
    <style>
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    .page {
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .content {
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
    }
    .content .inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .top {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .bottom {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        left: 0px;  
        bottom: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .top span, .bottom span {
        padding-left: 17px;
        z-index: 2000;
    }
    .top span, .bottom span {
        display: block;
        width: 100%;
    }

    #list2.page {
        margin-left: 110%;
    }
    </style>
</head>
<body>
    <div id="list1" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page1" name="page1" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
    <div id="list2" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page2" name="page2" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
</body>
</html>

2 个解决方案

解决方案1
 1  2011-02-16 05:19:10

See below code and checkout the working solution at http://jsfiddle.net/SyHd9/4/ 请参阅以下代码并查看http://jsfiddle.net/SyHd9/4/上的工作解决方案

Cross Browser Compatibile 跨浏览器兼容 

<div class="for100procHeight">
    <div class="header">fixed top</div>
    <div class="content">long text with scrolling content</div>       
</div>
<div class="footer">fixed bottom</div>

html { height: 100%; }
body { min-height: 100%; height: 100%; }

.for100procHeight{
    position:relative;
    width:900px;
    height:100%;
    * html height:100%;
    background-color:#ccc;
}
.header{
    width:100%;
    height:100px;
    background-color:red;
    clear:both;
}
.content{
    width:100%;
    clear:both;
}
.footer{
    width:900px;
    height:100px;
    background-color:blue;
    clear:both;
}
p{
padding:10px;
}

解决方案2
 1 已采纳  2011-02-16 05:33:26

Let me know if I have misunderstood what you're looking for, but how about something like this: 如果我误解了你在寻找什么，请告诉我，但是这样的事情怎么样：

CSS CSS 

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;   
}
#header {
    border: 1px solid #e3e3e3;
    position: relative;
    top: 0px;
    left: 0px;
}
#footer {
    border: 1px solid #e3e3e3;
    position: relative;
    margin-top: -20px; /* negative value of footer height */
    height: 20px;
    clear:both;
}
#content {
    overflow: auto;
    padding-bottom: 20px;
    padding-left: 20px;
}

To make this work for IE, you would need a conditional in the <head> section to feed this style to IE 6 and lower and 8 and higher. 要使这项工作适用于IE，您需要在<head>部分中使用条件将此样式提供给IE 6及更低版本以及8及更高版本。 

<!--[if !IE 7]>
    <style type="text/css">
        #wrapper {display:table;height:100%}
    </style>
<![endif]-->

... and an Opera fix: ...和Opera修复： 

body:before {
   content:"";
   height:100%;
   float:left;
   width:0;
   margin-top:-32767px;
}

HTML HTML 

<div id="wrapper">
    <div id="header">header</div>
    <div id="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<div id="footer">footer</div>

... check out the demo on jsFiddle and a demo with scrolling content . ... 查看jsFiddle上 的演示和带滚动内容的演示 。 Note that the reason there is a scroll-bar in my first example is because jsFiddle puts in a padding: 10px; 请注意，我的第一个例子中有一个滚动条的原因是因为jsFiddle放入了一个padding: 10px; on the body of the iFrame containing the demo that I can't overwrite. 在iFrame的主体上包含我无法覆盖的演示。

Here are some reference sources on a "sticky footer" and other good stuff: 以下是“粘性页脚”和其他好东西的一些参考资料：

If I misunderstood what you are looking for, then maybe this is a better example? 如果我误解了你在寻找什么，那么这可能是一个更好的例子吗？

... and the tutorial on that ......以及那个教程

I hope this helps. 我希望这有帮助。 Let me know if you have questions. 如果您有疑问，请告诉我。

暂无
暂无

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

相关问题 CSS Floated Div高度问题，没有简单的解决方案？ - CSS Floated Div height issue, no simple solution? 简单的 HTML / CSS 问题 - 高度和屏幕分辨率 - Simple HTML / CSS Questions - Height & Screen Resolution CSS-行高属性，它如何工作（简单） - CSS - Line height property, how it works (simple) 使用简单的CSS设置li的高度 - Set Height of li using simple CSS css height属性不是一个非常简单的例子： - css height property is not working in a very simple example: 使用100％高度的CSS实现简单的行布局 - Achieving a simple row layout with CSS using 100% height 非常简单的CSS最小高度100％带有边距的问题 - Very simple CSS minimum height 100% issue with margin 简单的100％CSS高度示例不起作用，有人可以帮忙吗 - Simple 100% CSS Height example not working, can someone help please CSS最大高度或简单高度会导致图像加载速度加快吗？ - Would a CSS max-height or a simple height cause quicker loading of images? 我用这个简单的jQuery语句设置CSS高度有什么问题？ - What am I doing wrong with this simple jQuery statement to set CSS height?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM