Fatal编程技术网
  • html/
  • Html DIV页脚不'；不匹配

Html DIV页脚不'；不匹配

html css

Html DIV页脚不'；不匹配,html,css,Html,Css,这就是我想要创造的。我有代码，看起来还行。但是div页脚不匹配。 我的代码： 正文{ 字体：100%/1.4 Verdana，Arial，Helvetica，无衬线； 背景：#42413C； 保证金：0； 填充：0； 颜色：#000； } .集装箱{ 宽度：100%； 身高：100% 背景：#FFF； 保证金：0自动； } .content ul，.content ol{ 填充：0 15px 15px 40px； } .页脚{ 填充：10px0； 背景：#CCC49F； 位置：相对位置； }

这就是我想要创造的。我有代码，看起来还行。但是div页脚不匹配。

我的代码：

正文{
字体：100%/1.4 Verdana，Arial，Helvetica，无衬线；
背景：#42413C；
保证金：0；
填充：0；
颜色：#000；
}
.集装箱{
宽度：100%；
身高：100%
背景：#FFF；
保证金：0自动；
}
.content ul，.content ol{
填充：0 15px 15px 40px；
}
.页脚{
填充：10px0；
背景：#CCC49F；
位置：相对位置；
}
.标题{
宽度：100%；
高度：100px；
背景#ADB96E；
}
.侧边栏1{
宽度：20%；
高度：1000px；
浮动：左；
背景:#EADCAE；
垫底：10px；
}
.侧边栏2{
宽度：10%；
高度：950px；
浮动：左；
背景:#EADCAE；
垫底：10px；
}
.内容{
浮动：左；
填充：10px0；
宽度：70%；
高度：950px；
浮动：左；
背景：#CF3
}
.杂种{
浮动：左；
填充：10px0；
宽度：10%；
高度：50px；
浮动：左；
背景：#CCC49F
}
.菜单{
浮动：左；
填充：10px0；
宽度：70%；
高度：50px；
浮动：左；
背景：#CCC49F
}

无标题文件
标题
边栏
混合的
菜单
舍夫
内容
页脚
我认为您的浮动有问题，但是您可以尝试下面的css代码，因为它工作得很好

正文{
保证金：0px
}
.标题{
背景#fff222；
高度：100px；
}
.侧边栏1{
宽度：20%；
背景：#000；
颜色：#fff；
高度：550px；
显示：内联块；
浮动：左；
}
.杂种{
宽度：20%；
浮动：左；
背景：绿色；
显示：内联块；
高度：50px；
}
.菜单{
背景：#222ff；
颜色：#fff；
显示：内联块；
宽度：60%；
高度：50px
}
.内容{
背景：#5efff0；
高度：500px；
浮动：左；
宽度：60%
}
.侧边栏2{
背景#ff22aa；
显示：内联块；
浮动：左；
宽度：20%；
高度：500px；
}
.页脚{
宽度：100%；
高度：100px；
背景：#111fff；
浮动：左；
}

无标题文件
标题
边栏
混合的
菜单
舍夫
内容
页脚
在我看来，从图片中获取布局的标记是错误的

选中此项：

html

<div class="header">header</div>

<div class="main">

  <div class="sidebar1">
    sidebar1
  </div>

  <div class="wrapper">

    <div class="menu">
      menu
    </div>

    <div class="sidebar2">
      sidebar2
    </div>

    <div class="content">
      content
    </div>

  </div>

</div>

<div class="footer">footer</div>
嵌套Flexbox可以做到这一点

*{
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
}
身体{
最小高度：100%；
}
.包装纸{
身高：100%；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
}
标题，
页脚{
高度：75px；
背景：#c0ffee；
}
.内包装一{
弹性：1；
显示器：flex；
}
.侧边栏-1{
背景#663399；
颜色：白色；
弹性：0.10%；
}
.内包装二{
弹性：1；
背景：李子；
显示器：flex；
弯曲方向：立柱；
}
导航{
高度：75px；
背景：#bada55；
}
主要{
显示器：flex；
弹性：1；
}
.侧边栏-2{
背景：绿色；
弹性：0.10%；
颜色：白色；
}
.内容{
弹性：1；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：灰色；
颜色：白色；
}

标题
边栏1
航行
边栏2
内容
页脚
其他人已经给出了解决您最初问题的答案。我只是想快速地向您展示使用HTML5可以给您的标记带来哪些好处。首先，您的
DOCTYPE
和
head
如下所示：

<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
    <head>
        <meta charset="UTF-8"> <!-- nice and simple -->
        <title>SCHEEF</title>
    </head>
<!-- ... -->
根据您的内容，您甚至可以将
#content
div
替换为
部分或
文章
元素（可能是第一个）


这几乎就是它的全部！您可能想尝试一下。
Add
clear：两者都有
到
.footer
，这样它将清除浮动的
div
s。您确定向我们显示了正确的布局草稿（链接中）。因为你的标记和它完全不同。顺便说一句，有什么理由不使用HTML5吗？另外，我建议对这些元素使用
id
属性，而不是
class
。或者会有第二个
侧边栏1
，例如@domdom当前的做法是除非需要，否则不使用ID。类是首选方法。您可以说是页脚，但只有一个页脚。你也说他们不匹配，但你这是什么意思？看起来就像我想得到的。只有一个白色的边框需要去掉，我得到了。这个“边框”实际上是
主体
边距。只需添加
正文{margin:0；padding:0}
：）即可。目前正在分析我与你的错误代码。想知道我做错了什么。您可以从错误和堆栈溢出顶部窥视中学习！在这种情况下，问题在于，与在代码中相邻放置div不同，一些标记应该嵌套在父容器中：介于
页眉
和
页脚
之间的中间内容应该嵌套在某个容器中，并且这个容器需要通过一些clearfix与页脚分开<代码>菜单
，
侧边栏2
，
内容
也应该嵌套在容器中，将它们与
侧边栏1
分隔开来。我已经有一段时间没有做太多的web内容了，实际上我还不知道flexbox的内容+谢谢你让我意识到这一点！但是，浏览器支持可能值得一提。根据，这可能会限制应用程序（IE 11+）。它确实很好而且简单！ 
<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
    <head>
        <meta charset="UTF-8"> <!-- nice and simple -->
        <title>SCHEEF</title>
    </head>
<!-- ... -->

<!-- ... -->
    <body>
        <header>Header</header>
        <aside id="sidebar1">Sidebar1</aside>
        <main>
            <nav>Menu</nav>
            <aside id="sidebar2">Sidebar2</aside>
            <div id="content">Content</div>
        </main>
        <footer>Footer</footer>
    </body>
</html>