I've been learning CSS for a while now, but the simplified layout below is still a little beyond me, so I am asking whether anyone knows of a model for such a layout, or would have an explanation to make this work.
我一直在学习CSS一段时间了,但下面简化的布局仍然有点超出我的意思,所以我问是否有人知道这种布局的模型,或者会有一个解释来使这个工作。
The page should have 3 bands or blocks:
页面应该有3个波段或块:
header, bottom, and content.
标题,底部和内容。
The 'header' would start at left 0, top 0 in the visible screen, go all the way to the right edge, and be 70 px in height.
'标题'将从可见屏幕中的左0,前0开始,一直到右边缘,高度为70像素。
The 'bottom' band would start at left 0, but at the bottom of the visible screen, and also be 70px in height (eg start at the bottom of the visible screen minus 70px). It would extend all the way to the right edge of the visible screen.
“底部”波段将从左侧0开始,但在可见屏幕的底部,也是70px的高度(例如,从可见屏幕的底部开始减去70px)。它会一直延伸到可见屏幕的右边缘。
The 'content' band would start at left 0, the top would start at the bottom of the 'header' band, and the bottom of the content block would extend down as far as the top of the 'bottom' band.
“内容”区段将从左侧0开始,顶部将从“标题”区域的底部开始,内容区块的底部将向下延伸至“底部”区域的顶部。
It would also be nice if the 'header' and 'bottom' band were fixed in their places, but the 'content' block were scrollable if there were more content that space in the block.
如果“标题”和“底部”区域固定在它们的位置也会很好,但如果块中有更多内容,则“内容”块可以滚动。
I think it's doable, but I can only get this so far at my current level, so I'd like to see how an expert would do it.
我认为这是可行的,但我目前只能达到目前的水平,所以我想看看专家会怎么做。
Many thanks Mike Thomas
非常感谢Mike Thomas
7 个解决方案
#1
6
Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.
页面底部的固定标题很难实现和维护。你能保证你的内容永远适合吗?滚动只是一个块而不是整个页面对于用户来说可能是单调乏味的,因为在使用向上翻页和向下翻页之前必须正确对焦。
Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.
更好的解决方案是让内容在内容完成后自然地进行。您可以为内容较多的页面设置内容的最小高度。
Sorry not a real answer, but your site will be better this way.
对不起,不是一个真正的答案,但你的网站会更好。
#2
5
I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:
我不确定这是否能解决它,但对于带有滚动中间内容部分的固定页眉和页脚,您可以检查此链接:
#3
1
here is a great site i have come across concerning css
这是一个我遇到的关于CSS的好网站
CSS技巧和教程
i think it would be best to just follow some basic designs there and learn from there :-)
我认为最好只是按照那里的一些基本设计并从那里学习:-)
#4
1
What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.
你想要的是一个粘性的页脚。至于内容,你需要实现一个可滚动的DIV - 处理溢出的关键。
#5
0
CSS Frames
This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.
此示例涵盖了固定在顶部和底部的页眉和页脚,但宽度小于100%。我相信你可以调整。
By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.
顺便说一句,我发现这一点的方法是搜索“CSS框架” - 保持内容的一部分静止,而其余的滚动有时被称为那种方式,因为它类似于人们习惯用HTML框架做的事情。
#6
0
Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
示例 - Css列表属性/示例 - Css图层属性/示例 - Css文本框属性/示例 - Css字体属性/示例 - Css文本属性/示例 - Css光标属性/示例 - Css背景属性/示例 - Css表属性/示例 - Css滚动条属性/示例 - 工具 - 单位 - 参数 - 模板页面 - 网页设计
#7
#1
6
Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.
页面底部的固定标题很难实现和维护。你能保证你的内容永远适合吗?滚动只是一个块而不是整个页面对于用户来说可能是单调乏味的,因为在使用向上翻页和向下翻页之前必须正确对焦。
Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.
更好的解决方案是让内容在内容完成后自然地进行。您可以为内容较多的页面设置内容的最小高度。
Sorry not a real answer, but your site will be better this way.
对不起,不是一个真正的答案,但你的网站会更好。
#2
5
I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:
我不确定这是否能解决它,但对于带有滚动中间内容部分的固定页眉和页脚,您可以检查此链接:
#3
1
here is a great site i have come across concerning css
这是一个我遇到的关于CSS的好网站
CSS技巧和教程
i think it would be best to just follow some basic designs there and learn from there :-)
我认为最好只是按照那里的一些基本设计并从那里学习:-)
#4
1
What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.
你想要的是一个粘性的页脚。至于内容,你需要实现一个可滚动的DIV - 处理溢出的关键。
#5
0
CSS Frames
This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.
此示例涵盖了固定在顶部和底部的页眉和页脚,但宽度小于100%。我相信你可以调整。
By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.
顺便说一句,我发现这一点的方法是搜索“CSS框架” - 保持内容的一部分静止,而其余的滚动有时被称为那种方式,因为它类似于人们习惯用HTML框架做的事情。
#6
0
Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
示例 - Css列表属性/示例 - Css图层属性/示例 - Css文本框属性/示例 - Css字体属性/示例 - Css文本属性/示例 - Css光标属性/示例 - Css背景属性/示例 - Css表属性/示例 - Css滚动条属性/示例 - 工具 - 单位 - 参数 - 模板页面 - 网页设计