css - 页面高度-div结构-6ren

css - 页面高度-div结构

转载作者：行者123 更新时间：2023-11-27 22:48:58

24

4

我试图让我的页面占据 100% 的屏幕，并带有页脚，它需要始终位于页面底部。

div 应该在页面调整大小时展开，并具有正确的背景颜色。

我目前的错误是:- 页脚位于屏幕底部而不是页面底部。- div(菜单)大于 div(内容)- div 未正确调整大小

这是我的代码:

div结构

<div id="container"><br />
   <div id="header">CMS</div>

   <div id="menu"><?php include ('includes/menu.php');?></div>
   <div id="content">
      <?php include $include_page?>
   </div>

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

CSS

body {
    height: 100%;
    color: #0b0b0b;
    background-color: #696060;
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, sans-serif;
    font-size: 12.5px;  
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    background-color: #f1f1f1;
    border-left: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
    height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
}
#menu {
    width: 210px;
    background-color: #e0e0e0;
    float: left;
    padding: 10px 10px 10px 10px;
    height: 100%;
}
#content {
    width: 750px;
    height: 100%;
    float: left;    
    padding: 10px 10px 10px 10px;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 1000px;
    height: 20px;
    background-color: #a31f00;
    color: #fcfcfc;
    text-align: center;
    font-size: 11px;
}

最佳答案

您可能正在考虑粘性页脚。当没有足够的内容将其向下推时，粘性页脚会粘在页面底部，但当内容开始溢出页面时，它会随之溢出。

要制作一个，您基本上想要将页脚以外的所有内容包装在 <div> 中标签，像这样:

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

  <div id="main">
    <!-- All you page content goes here -->
  </div>
</div>

<div id="footer">
  I am a footer.
</div>

现在，对于神奇的 CSS:

html, body
{
  height: 100%;
}

#wrap
{
  min-height: 100%;
}

#main
{
  overflow: auto;
    padding-bottom: 150px; /* must be same height as the footer */
}  

#footer
{
  position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
} 

/* Opera Fix */
body:before
{
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;/
}

在您的 HTML 页面上，您将需要针对 IE6 和更早版本以及 IE8 的条件样式(!IE7 表示不是 7，而是所有其他):

<head>
  ...
  <!--[if !IE 7]>
  <style type="text/css">
    #wrap
    {
      display: table;
      height: 100%;
    }
  </style>
  <![endif]-->
  ...
</head>

关于css - 页面高度-div结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5261939/

24

4

0

文章推荐： javascript - 切换 cookie true false magento

文章推荐： jquery - JQuery解析XML，需要通过属性名查找

文章推荐： javascript - 查找嵌套 json 对象深处的对象

文章推荐： html - webkit下xhtml设置div为特定高度

c - 结构 |结构/union 的不完整类型错误
我目前正在尝试基于哈希表构建字典。逻辑是:有一个名为 HashTable 的结构，其中包含以下内容: HashFunc HashFunc; PrintFunc PrintEntry; CompareF
c++ - 如何删除指向(结构/对象)的指针而不破坏(结构/对象)内部的指针？
如果我有一个指向结构/对象的指针，并且该结构/对象包含另外两个指向其他对象的指针，并且我想删除“包含这两个指针的对象而不破坏它所持有的指针”——我该怎么做这样做吗？指向对象 A 的指针(包含指向对象
go - 如何访问该“结构” slice 的新“类型”中的“结构”字段？
像这样的代码 package main import "fmt" type Hello struct { ID int Raw string } type World []*Hell
mysql - 将 CSV 移动到 MySQL 关系数据库的第一步。 CSV 结构!= MySQL 结构
我有一个采用以下格式的 CSV: Module, Topic, Sub-topic 它需要能够导入到具有以下格式的 MySQL 数据库中: CREATE TABLE `modules` ( `id
c++ - 将 POD 结构/结构 vector 复制到 vector 的最优雅方式
通常我使用类似的东西 copy((uint8_t*)&POD, (uint8_t*)(&POD + 1 ), back_inserter(rawData)); copy((uint8_t*)&PODV
apache-spark - Spark : Union can only be performed on tables with the compatible column types. 结构<名称，ID> != 结构
错误 : 联合只能在具有兼容列类型的表上执行。结构(层:字符串，skyward_number:字符串，skyward_points:字符串)<> 结构(skyward_number:字符串，层:字符
条件跳转或移动取决于未初始化的值、结构
我有一个指向结构的指针数组，我正在尝试使用它们进行 while 循环。我对如何准确初始化它并不完全有信心，但我一直这样做: Entry *newEntry = malloc(sizeof(Entry)
C "if"结构
我正在学习 C，我的问题可能很愚蠢，但我很困惑。在这样的函数中: int afunction(somevariables) { if (someconditions)
创建列表的列表(结构)
我现在正在做一项编程作业，我并没有真正完全掌握链接，因为我们还没有涉及它。但是我觉得我需要它来做我想做的事情，因为数组还不够我创建了一个结构，如下 struct node { float coef;
C符号常量+结构
给定以下代码片段: #include #include #define MAX_SIZE 15 typedef struct{ int touchdowns; int intercepti
Checknullarray 结构
struct contact list[3]; int checknullarray() { for(int x=0;x<10;x++) { if(strlen(con
javascript "for (;;);"结构
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Empty “for” loop in Facebook ajax what does AJAX call
C# 结构 "this = ...."
我刚刚在反射器中浏览了一个文件，并在结构构造函数中看到了这个: this = new Binder.SyntaxNodeOrToken(); 我以前从未见过该术语。有人能解释一下这个赋值在 C# 中的
用于命名字符串常量的 Python 结构
我经常使用字符串常量，例如: DICT_KEY1 = 'DICT_KEY1' DICT_KEY2 = 'DICT_KEY2' ... 很多时候我不介意实际的文字是什么，只要它们是独一无二的并且对人类读
用指针初始化 C 结构
我是 C 的新手，我不明白为什么下面的代码不起作用: typedef struct{ uint8_t a; uint8_t* b; } test_struct; test_struct
可以像内置类型一样直接分配常量值的 .NET 结构
您能否制作一个行为类似于内置类之一的结构，您可以在其中直接分配值而无需调用属性？前任: RoundedDouble count; count = 5; 而不是使用 RoundedDouble cou
编译 C 结构
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
r - 重叠嵌套列表并保留命名/结构
在创建嵌套列表时，我认为 R 具有对列表元素有用的命名结构。我有一个列表列表，并希望应用包含在任何列表中的每个向量的函数。 lapply这样做但随后剥离了列表的命名结构。我该怎么办 lapply嵌套列
个人管理器的 XML 结构
我正在做一个用于学习目的的个人组织者，我从来没有使用过 XML，所以我不确定我的解决方案是否是最好的。这是我附带的 XML 文件的基本结构:
couchdb - PouchDB 结构
我是新来的 nosql概念，所以当我开始学习时 PouchDB ，我找到了这个转换表。我的困惑是，如何PouchDB如果可以说我有多个表，是否意味着我需要创建多个数据库？因为根据我在 pouchdb

首页

博学

6Ren·AI

商城

css - 页面高度-div结构