显示表格html混乱_Html_Css - Fatal编程技术网

显示表格html混乱

html css

显示表格html混乱,html,css,Html,Css,所以我试图用一些基本的东西来构建一个布局：一个有固定大小的标题；内容，只允许和页面一样大——任何溢出都应该在页面内滚动我似乎无法使内部div仅滚动并保持溢出 CSS: HTML: 标题在这里我只想用css和html来完成这项工作有人请帮帮我！我有点困惑，为什么这不起作用，你根本不需要显示：表格，这对你来说是行不通的因为你知道标题的高度，所以你真正需要做的就是给#content一个位置：绝对的（默认情况下相对于主体标记，如果它没有包装在任何相对的位置）。然后，您可以将其从需要开始的位

所以我试图用一些基本的东西来构建一个布局：一个有固定大小的标题；内容，只允许和页面一样大——任何溢出都应该在页面内滚动

我似乎无法使内部div仅滚动并保持溢出

CSS:

HTML:


标题在这里

我只想用css和html来完成这项工作

有人请帮帮我！我有点困惑，为什么这不起作用，你根本不需要显示：表格，这对你来说是行不通的

因为你知道标题的高度，所以你真正需要做的就是给

#content

一个

位置：绝对的（默认情况下相对于主体
标记，如果它没有包装在任何相对的位置）。然后，您可以将其从需要开始的位置（标题的底部）一直拉伸到底部，执行以下操作：
#content {
    position: absolute;
    top: 150px; /* or whatever your header height is */
    bottom: 0;
}

请参见我的JSFIDLE示例：
（我将主体
的填充和边距设置为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>


标题在这里
display:table
是一种完全错误的方法。使用position:absolute
并拉伸内容。您知道您的标题有多高，还是一个灵活/可变的高度？标题是一个恒定的高度，但内容div必须为标题的100%height@CSgoose，看来你已经问了好几个问题了，但没有将其中任何一个标记为已回答。如果你的问题有正确的答案，如果你接受了，那就太好了，否则人们将来不会愿意帮助你。]当我的问题得到解决时，我会将其中一个标记为接受这里有一个替代解决方案，可能不完全适合你的问题，但它有时在类似情况下很有用：。它依赖于浏览器的滚动条，而不是向div中添加滚动条，但它的功能与您要求的大致相同。不确定这是否有用，但你永远不知道。嗯，我忘了加上主体必须有边距：0自动；似乎不适用此规则，因为现在内容没有正确的边距，只要顶部和底部都是0（您也有），这应该不是问题。似乎右侧的右边距丢失了，但是如果我把身体的位置放在最外面，那么最外面的div在头部的高度上有一个卷轴。我不确定你的确切意思，你能把它也放在一个jsfiddle中吗？当#content
设置为height:40px时，这个卷轴将如何延伸到屏幕的底部？#content height无法固定
#header {
    width: 100%;
    height: 40px;
    background-color: #ff4200;
}
#content-body {
    width: 100%;
}
#content {
    width: 100%;
    height: 40px;
    overflow-y: scroll;
    background-color: #0042ff;
}

<!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>