显示表html混淆

所以我试图建立一个基本的东西布局：一个头，有一个固定的大小;和内容，只允许与页面一样大 - 任何溢出都应该在内部滚动。显示表html混淆

我似乎无法得到内部股利只滚动和溢出留下来。

CSS：

body { 
    display:table; 
    width: 100%; 
}   
#content-body,#header { 
    display:table-row; 
} 

#content { 
    text-align: center; 
    height: 100%; 
    width: 50%; 
    overflow-y: scroll; 
    background-color: red; 
}

HTML：

<body> 
    <div id="header"> 
     header here 
    </div> 

    <div id="content-body"> 
      <div id="content"> 
      <-- Need this to scroll --> 
      </div> 

     </div> 
    </div> 
</body>

的JSFiddle

我只希望得到这个工作只用CSS和HTML

有人请帮助我！我有点困惑，为什么这不起作用

来源

2013-10-02 dbarnes

'显示：table'是一个彻底的错误的方式来做到这一点。使用'position：absolute'并拉伸内容。 – SLaks

你知道你的头部有多高，还是灵活/变化的高度？ –

标题是一个不变的高度，但内容div需要100％ - 标题高度 – dbarnes

你根本不需要display: table，这不会为你做诡计。

你既然知道了标题的高度，你真正需要做的就是给#content一个position: absolute（如果它不是包裹在任何一个relative位置，这是相对于body标签默认情况下）。

#content { 
    position: absolute; 
    top: 150px; /* or whatever your header height is */ 
    bottom: 0; 
}

见我的jsfiddle例如：然后，你可以从那里需要启动（头的底部）一路底部做这个伸展它http://jsfiddle.net/W43UV/5/

（我设定的填充和在body到0的保证金，以防止top偏移搞砸）

来源

2013-10-02 21:30:57

以下是可能不完全适合您的问题的替代解决方案，但在类似情况下它有时也很有用：http://jsfiddle.net/W43UV/6/。它依赖于浏览器的滚动条，而不是在div上添加一个滚动条，但它与你所要求的大致相同。不知道这是否有用，但你永远不知道。 –

嗯我忘了添加，身体必须有余量：0自动;似乎不适用于此规则，因为现在内容没有正确的边距 – dbarnes

只要顶部和底部为0（您也有），这应该不成问题。 –

尝试是这样的：

sandbox.css：

#header { 
    width: 100%; 
    height: 40px; 
    background-color: #ff4200; 
} 
#content-body { 
    width: 100%; 
} 
#content { 
    width: 100%; 
    height: 40px; 
    overflow-y: scroll; 
    background-color: #0042ff; 
}

sandbox.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="sandbox.css"> 
    </head> 
    <body> 
     <div id="header"> 
      header here 
     </div> 
     <div id="content-body"> 
      <div id="content"> 
       <-- Need this to scroll --> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-10-02 22:03:52 chrishasbrouck

将'＃content'设置为'height：40px'，这将如何延伸至屏幕底部？ –

＃内容高度无法修复 – dbarnes

显示表html混淆

回答

相关问题