html - 我是否必须添加一个额外的 div 才能实现此目的？-6ren

html - 我是否必须添加一个额外的 div 才能实现此目的？

转载作者：太空宇宙更新时间：2023-11-04 15:35:46

24

4

我想知道，如果我想让页眉的紫色和页脚的蓝色在整个页面上延伸 100%，但让中间的内容与中间的橙色对齐，我应该怎么做实现了吗？

我是否必须在页眉和页脚周围添加额外的 100% div 并在其中着色？这似乎是一种废话。

这是我正在使用的代码: http://jsfiddle.net/HMsKa/21/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
        <title>Title</title>
        <link href="/static/css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="header" class="thin_width" >

                        <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
                        <ul>
                            <li><a href="/posts/list/">Link1</a></li>
                            <li><a href="/posts/create/">Link 2</a></li>
                            <li><a href="/about">Link 3</a></li>
                        </ul>
            </div>
            <div id="content" class="thin_width">
            <h1>Sed ut perspiciatis unde</h1>
            <form id="searchForm" action="/search">
                <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword">
                <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location">
                <input type="submit" class="button r2 b1 ts3" id="button_search" value="Search">
            </form>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>            
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
       </div>
       <div id="footer" class="thin_width">
           &#169; 2012 Company, Inc.
           <ul>
               <li><a href="/contact">Contact</a></li>
               <li><a href="/faq">FAQ</a></li>
               <li><a href="/terms">Terms</a></li>
               <li><a href="/privacy">Privacy</a></li>
           </ul>
        </div>
        </div>
    </body>
</html>

CSS

/* GENERAL */
html { height:100%; }
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }
p { font size: 13px; margin: 10px 0; padding: 0; }
h1 { font-size: 22px; }  
h2 { font-size: 17px; }  
h3 { font-size: 14px; } 
blockquote { font-style: italic; }

.thin_width { width: 600px; }

#container { min-height: 100%; position: relative; background-color: red;
width: 600px;
margin: 0 auto;
}
#content {padding-bottom: 80px; background-color: orange;}
#footer { 
    position:absolute; 
    bottom: 0; 
    clear: both; 
    float:left;
    height:60px;
    background-color: blue;
}

#footer li { display:inline; }

#header {background-color: purple;}

最佳答案

你可以这样做:My Fiddle

怎么做:

只需从包装器 div 中取出页眉和页脚，并为页眉和页脚提供 100% 的宽度。

要使页眉和页脚的内容居中，您需要将页眉和页脚中的内容包装在包装器 div 中，为其指定 width 600px; 并使用 margin: auto; 将其引入页面流

关于html - 我是否必须添加一个额外的 div 才能实现此目的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12822255/

24

4

0

文章推荐： javascript - JQuery GET 请求不会从 php echo 获取正确的数据

文章推荐： javascript - 通过

标签禁用文本自动 trim

文章推荐： HTML - 带数字的有序列表的标记？

文章推荐： c++ - 如果运算符是常量，运算符 << 重载通常会失败？

OAuth2 `expires_in` 目的
我正致力于通过 OAuth 合并外部 API，但对 expires_in 属性的用途有点迷惑。通过阅读，应该对 api token 的使用进行防御性编码，因为您应该预料到 token 在任何时候都可能
spring - Spring中bean的用途/目的
有人可以概述或总结一下 Spring 框架上下文中 bean 的用途吗？我了解标准的 Java bean(没有 arg 构造函数、getter/setter，通常是序列化的)，但 Spring be
opengl - OpenGL程序管道对象的正确用法/目的
使用 OpenGL 4.1 和 ARB_separate_shader_objects，我们能够在着色器程序中存储着色管道的不同阶段。众所周知，要使用这些，我们需要将它们附加到程序管道对象，然后绑定(
optaplanner - MoveIteratorFactory 目的
正如我从文档中了解到的那样，“MoveIteratorFactory”的目的是生成每一步都需要执行的 Action 。 “getSize”方法的移动子集有多大？ “createOriginalMove
cmake - InstallRequiredSystemLibraries 目的
请解释 CMakeLists.txt 中这一行的目的是什么: 包括(InstallRequiredSystemLibraries) 我在 CMake 示例中看到这一行，但找不到好的解释，为什么我需要它
android - 多个布局中的一个过程/目的
这里是新手。我仍在尝试理解在多个布局中运行单个进程或目的的概念。例如，我想在我的申请中添加“提交后”功能。有一个包含标题、内容等文本框的主布局，以及一个链接到另一个布局以选择类别的按钮。我的问题是，
ios - willSendRequestForAuthenticationChallenge 目的
我在看 Box Oauth2.0 View Controller : https://github.com/box/box-ios-sdk-v2/blob/master/BoxSDK/OAuth2/B
Java clipboardOwner 目的？
我编写了一个将字符串复制到系统剪贴板的 Java 应用程序。构造函数使用 Clipboard.setContents(Transferable contents, ClipboardOwner own
c# - 命令模式 - 目的？
阅读此文后:http://sourcemaking.com/design_patterns/command 我还是不太明白为什么我们需要这个。最佳答案想法是，如果命令被封装为对象，那么这些命令可以
c++ - 专业模板 - 目的
我知道 c++ 中的模板是做什么的，但是今天我看到了一些奇怪的代码: template <> void swap(foo &a, foo &b) { a.name = b.name; a.
c# - IEnumerator 目的
我不太明白 C# Collections 中 IEnumerator 的用途是什么。它的用途是什么，为什么要使用它？我试着在线查看 http://msdn.microsoft.com/en-us/l
c - #line - 目的？
不幸的是，我今天做了一些代码考古(同时重构了一些旧的危险代码)并发现了这样的小化石: # line 7 "foo.y" 能在里面找到如此古老的宝藏，我完全惊呆了。我在 C 编程的网站上阅读了它。然而，
java - Hibernate @UniqueConstraint 目的
您能否澄清一下此注释的实际用途？ - 如果我们没有使用数据库中的 SQL 表定义定义相应的约束，会发生什么情况。当我们尝试插入时，hibernate 会检查唯一性吗？或者这就是DB的目的吗？如果 hi
javascript - join ("") 在只有一个元素的字符串数组上调用。目的？
我在视频教程中看到过这段代码: const navToggle = ["Menu"].join(""); $(".site-header").prepend(navToggle); 我明白它的基本作用
c++ - Gtkmm scroll_to() 目的
我想知道这个成员函数的 scroll_to(TextBuffer::iterator& iter, double within_margin = 0)参数 within_margin。 API 是这样
search - 是否可以将子目录提交到目录以用于 seo 目的？
我想知道是否可以将子目录提交到目录例如，假设您有 site.com/directory 可以将子目录提交到目录。我即将开始为希望她的网站在搜索引擎中排名靠前的客户进行一些搜索引擎优化。我知道实现此目的
c++ - STL 迭代器 - 目的
STL 迭代器的用途是什么？为什么程序员要创造这个概念？最佳答案迭代器允许您将算法与容器分开。只要您有开始和结束迭代器，并且知道迭代器的功能(随机访问等)，您就可以在迭代器指定的范围内进行操作。例
objective-c - NSUTF8StringEncoding 目的
NSData *responseData = [NSURLConnection sendSynchronousRequest:theRequest returningResponse:&respons
linux - I2C_SLAVE ioctl 目的
我正在编写代码，使用通用的 linux i2c 驱动程序 linux/i2c-dev.h 实现一个简单的 i2c 读/写功能我对 ioctl 感到困惑:I2C_SLAVE 内核文档说明如下: You
Scala collection.mutable.Cloneable 目的
在尝试克隆可变集合时，我最初的方法是对 mutable.Cloneable 特征使用 clone() 方法。但是，这取决于创建引用副本的 java.Object.clone 实现，而不是深拷贝。通过测

首页

博学

6Ren·AI

商城

html - 我是否必须添加一个额外的 div 才能实现此目的？