如何使用 div/css 创建两帧水平平铺框架集的行为？

发布于 2024-12-23 11:23:52 字数 810 浏览 0 评论 0原文

我正在尝试布局这样的网页：

|-----------------------|
| header (fixed)        | <- no scroll bar
|-----------------------|
| body                | |
|                     | |
|                     | | <- scroll bar
|                     | |
|                     | |
|                     | |
|                     | |
| ... continues ...   | |
| ... so requires ... | |
| ... scroll bar ...  | |
|---------------------|-|

在过去，我会使用框架集来完成此操作。由于某些原因（包括它已被弃用），我不想走这条路。

在过去，我以为我是使用 height=100% 的表格来完成此操作，其中两行作为页面的整个主体，并且溢出样式在不同的位置设置为隐藏/自动以使底行到达有主页内容的滚动条。我可以接受这个作为解决方案，但我不记得如何正确设置它（我很确定它涉及将正确的页面元素设置为位置：相对或其他东西，但我一直在敲打我在键盘上花了两个小时试图让它工作，所以我放弃了）。

我读过声称可以使用框架/表格执行的任何操作都可以使用正确的 div 和 css 执行，所以我真的很希望看到有人向我展示该解决方案。

另请注意：我只希望滚动条在需要时根据内容显示（根据溢出：自动），而不是始终显示（溢出：滚动）。

原文

I'm trying to lay out a web page like this:

|-----------------------|
| header (fixed)        | <- no scroll bar
|-----------------------|
| body                | |
|                     | |
|                     | | <- scroll bar
|                     | |
|                     | |
|                     | |
|                     | |
| ... continues ...   | |
| ... so requires ... | |
| ... scroll bar ...  | |
|---------------------|-|

In the old old days I'd have done this with a frameset. I don't want to go that route for a few reasons (including it being deprecated).

In the not-as-old days I thought I'd done this using a height=100% table with two rows as the entire body of the page, and the overflow style set hidden/auto in different places to get the bottom row to have the scroll bar for the main page content. I'd be OK with this as a solution, but I can't remember how to set it up right (I'm pretty sure it involves getting the right page elements set to position:relative or something, but I've been banging my head on the keyboard for two hours trying to get it to work so I give up).

I've read claims that anything you can do with frames/tables you can do with the right divs and css, so I'd really like to see someone show me that solution.

Also note: I only want the scroll bar to appear when needed based on the content (as per overflow:auto) not all the time (overflow:scroll).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-柠檬树下少年和吉他 2024-12-30 11:23:52

这是一个完全可行的解决方案，可以解决您的问题，即在绝对定位的标题下滚动内容，而浏览器窗口上没有其他滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{
    height:100%;
}
html>body{
    position:absolute;
    width:100%;
}
#content{
    background:#d2da9c;
    overflow:auto;
    position:absolute;
    width:100%;

    left:0;
    top:100px;
    bottom:0;
}

#top{
    position:absolute;
    left:0;
    width:100%;
    top:0px;
    height:100px;
    background:red;
    overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <p>Start</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="top">
    <h1>Header</h1>
</div>
</body>
</html>

Here is a fully working solution to your problem scrollable content under an absolute positioned header with no other scrollbar on the browser window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{
    height:100%;
}
html>body{
    position:absolute;
    width:100%;
}
#content{
    background:#d2da9c;
    overflow:auto;
    position:absolute;
    width:100%;

    left:0;
    top:100px;
    bottom:0;
}

#top{
    position:absolute;
    left:0;
    width:100%;
    top:0px;
    height:100px;
    background:red;
    overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <p>Start</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="top">
    <h1>Header</h1>
</div>
</body>
</html>

回复收藏 0 原文

苍暮颜 2024-12-30 11:23:52

这是制作固定页眉的简单方法，当您还想制作固定页脚时，它会变得有点复杂。不过这应该对你有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
     body{
      margin:0;
      padding:0;
      position:relative;
     }
     body, html, #wrapper {
        height:100%;
        position:relative;
     }
     #header{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100px;
      background-color:yellow
     }
     #wrapper {
        height:100%;
        padding-top:100px;
     }
    #content{
        overflow:auto;
        height:100%;
    }

    </style>
    </head>
    <body>
    <div id="header"> header </div>
    <div id="wrapper">
        <div id="content"> 
            <p>content </p>

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

这个好一点，我们只需要去掉底部的间距即可完全删除最右边的滚动条。

This is the simple way to do a fixed header it gets a little more complex when you want to do a fixed footer as well. This should work for you though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
     body{
      margin:0;
      padding:0;
      position:relative;
     }
     body, html, #wrapper {
        height:100%;
        position:relative;
     }
     #header{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100px;
      background-color:yellow
     }
     #wrapper {
        height:100%;
        padding-top:100px;
     }
    #content{
        overflow:auto;
        height:100%;
    }

    </style>
    </head>
    <body>
    <div id="header"> header </div>
    <div id="wrapper">
        <div id="content"> 
            <p>content </p>

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

This one is a little better we just need to get rid of the spacing at the bottom to remove the far right scrollbar completely.

回复收藏 0 原文

~没有更多了~