gpt4 book ai didi

css - 带有全长菜单导航的静态页眉和页脚

转载 作者:行者123 更新时间:2023-11-28 10:36:47 24 4
gpt4 key购买 nike

我已经尝试了所有我能想到的方法。我已经尝试了来自堆栈和教程站点的许多编码示例。无论我做什么,我都无法让它发挥作用,而且我完全无法解决这个问题。我和 CSS 合不来。

这是我正在尝试做的事情:

  • 静态 header (始终在屏幕上。)
  • 始终位于页面底部的页脚。 (滚动内容,但如果没有足够的内容将出现在屏幕底部。
  • 左侧菜单的背景一直延伸到页脚顶部。

我无法让背景一直向下。不能有100%的 parent 亲亲绝对是正常的问题。我现在拥有的这段代码可以正常工作,但背景除外。老实说,我正在考虑将背景制作成图像并重复。这是代码:

    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#main_wrapper {
min-height: 100%;
position: relative;
}

#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}

#content {
margin-left: 200px;
background:#F00;
}

#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}

#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}

#left_menu {
width:200px;
background: #FF0;
float:left;
}

</style>

</head>

<body>

<div id="main_wrapper">

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

<div id="content_wrapper">

<div id="left_menu">MENU</div>

<div id="content">CONENT</div>

</div>

<div id="footer"></div>

</div>

</body>
</html>

JSFiddle Source

正如您在 Fiddle 代码中看到的那样,我要做的是让黄色背景占据整个高度。添加的任何内容都会导致整个页面滚动,页脚移动到底部,页眉保持不变。除了占据整个高度的黄色背景颜色外,所有这些现在都有效。

最佳答案

最简单的做法是向背景添加一个在 Y 方向上重复的图像。

background-image:url(images/background.gif);
background-repeat:repeat-y;

这样可以完成工作,但必须有更好的方法!

关于css - 带有全长菜单导航的静态页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23307627/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com