overmind 2024-11-07 10:37 采纳率: 82.4%
浏览 13
已结题

浮动div的高度控制问题。

红框区域总是白色，希望是浅绿色

img

<link rel="stylesheet" href="style.css">
<body>
<div id="wrapper">
    <div id="header"> 我是header </div>
    <div id="middle">
        <div id="sidebar">

            <div class="subject-main-container">
                <div class="subject-top-container">春</div>
                <div class="subject-bottom-container">
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">夏</div>
                <div class="subject-bottom-container">
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">秋</div>
                <div class="subject-bottom-container">
                    <div>8</div>
                    <div>9</div>
                    <div>10</div>
                </div>
            </div>
            <div class="subject-main-container">
                <div class="subject-top-container">冬</div>
                <div class="subject-bottom-container">
                    <div>11</div>
                    <div>12</div>
                    <div>1</div>
                </div>
            </div>

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

            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
            <div class="container">
                <div class="image"></div>
                <div class="author">作者</div>
                <div class="date">2024/11/11</div>
            </div>
        </div>
    </div>
    <div id="footer">我是 footer</div>
</div>
</body>


body{
    margin:0;
}
div#wrapper{
    margin:0 auto;
    width:1000px;
    background:lightgreen;
}
div#header{
    height:120px;
    width:1000px;
    background:lightblue;
}
div#middle{
}
div#sidebar{
    width:240px;
    float:left;
    background:lightgreen;
}
div#content{
    width:760px;
    float:left;
    background:cyan;
}
div#footer{
    height:100px;
    width:1000px;
    float:left;
    background:lightblue;
}

.subject-main-container {
  width: 240px;
}

.subject-top-container {
  background-color: darkgreen;
  width: 240px;
  height: 70px;
  border-radius: 150px;
  text-align:center;
  color:white;
  font-size:60px;
}

.subject-bottom-container {
  background-color: lightgreen;
  width: 240px;
  margin-left:20px;
  margin-top:-5px;
  padding:20px 10px;
}

.subject-bottom-container div{
  font-size:22px;    
  line-height:30px
}
div.subject-main-container .subject-bottom-container{
    display:none;
}

div.subject-main-container:hover .subject-bottom-container{
    display:block;
}

.container {
    width: 150px;
    height: 210px;
    text-align: left;
    float:left;
    margin-left:15px;
}

.image {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    background:black;      
}

.author {
    font-weight: bold;
    font-size:25px;
}

.date {
    font-size: 16px;
    color:grey;
}
  • 写回答

22条回答 默认 最新

  • 问答-莫得感情 2024-11-07 10:39
    关注

    ️题主您好️，目前由我为您解答👇🏼
    🧡参考谷歌智能助手，由吾为汝整理提供🧡

    问题在于 #middle 没有清除浮动，导致它的高度塌陷，无法包含内部浮动的 #sidebar 和 #content。因此，#wrapper 的背景色（浅绿色）无法延伸到 #sidebar 的下方，露出了 #wrapper 的父元素的背景色（通常是白色）。

    以下是几种解决方法，并推荐最佳方案：

    1. 使用 clearfix 清除浮动 (推荐)

    这是最常用的也是最推荐的清除浮动的方法。它利用伪元素 ::after 在 #middle 内部创建一个不可见的块级元素，并将其清除浮动，从而撑开 #middle 的高度。

    div#middle::after {
    content: "";
    display: table;
    clear: both;
}

    2. 给 #middle 设置 overflow: hidden 或 overflow: auto

    这种方法比较简单，但需要注意的是，如果 #middle 内部的元素超出了它的高度，可能会被隐藏或出现滚动条。如果你的设计不允许出现滚动条，或者需要显示所有内容，那么这种方法并不适用。

    div#middle{
    overflow: hidden; /* 或 overflow: auto */
}

    3. 给 #middle 设置固定高度

    这种方法不太灵活，因为你必须预先知道 #sidebar 和 #content 的高度，才能设置正确的 #middle 高度。如果内容是动态的，这种方法就很难维护。

    div#middle {
    height: 1000px; /*  根据实际需要调整 */
}

    4. 在 #sidebar 后面添加一个空的 div 并清除浮动

    这种方法比较繁琐，不推荐使用。

    <div id="middle">
    <div id="sidebar">
        ...
    </div>
    <div style="clear:both;"></div> <div id="content">
        ...
    </div>
</div>

    最佳方案：使用 clearfix

    将以下代码添加到你的 style.css 文件中：

    div#middle::after {
    content: "";
    display: table;
    clear: both;
}

    这种方法兼容性好，代码简洁，不会产生副作用，是清除浮动的最佳实践。

    最终修改后的 CSS 代码:

    body{ margin:0;}
div#wrapper{ margin:0 auto; width:1000px; background:lightgreen;}
div#header{ height:120px; width:1000px; background:lightblue;}
div#middle::after {  content: "";  display: table;  clear: both;} /* 添加 clearfix */
div#sidebar{ width:240px; float:left; background:lightgreen;}
div#content{ width:760px; float:left; background:cyan;}
div#footer{ height:100px; width:1000px; float:left;  background:lightblue;}
/* ... 其他样式 ... */

    这样修改后，红色的 #wrapper 区域就能正确地显示浅绿色背景了，因为 #middle 的高度会被内部的浮动元素撑开。

    希望以上解释和解决方案对你有帮助! 请尝试使用 clearfix 方法解决问题。 如果还有其他疑问，请随时提出。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(21条)

报告相同问题？

  • 浮动div的高度控制问题，如何解决？
    2024-11-26 09:37
    bug菌¹的博客 推荐使用第一种方法，即使用::after伪元素清除浮动，这是一种常见的 CSS 设计方式，可确保父容器正确包裹浮动内容。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要...
  • 前端css让div浮动,Web前端篇：css浮动
    2021-08-03 22:35
    五星天皇岩里政男的博客 浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。文字环绕现象水平方向外边距html{font-size:24px;}img{width:20rem;}#sep{float: left;}p{border:1px solid red;...
  • 盒子浮动的高度塌陷问题及解决方案
    2024-10-31 22:24
    师从小k的博客 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要...
  • JS 实现Div向上浮动的实现代码
    2020-10-27 22:16
    通过上述代码，div元素将在页面上显示为一种连续上升的动画效果，用户可以通过鼠标交互来控制div的浮动状态。 总结来说，该知识点介绍了一个简单的JavaScript实现div向上浮动效果的方法。通过HTML、CSS和JavaScript...
  • jQuery实现的浮动层div浏览器居中显示效果
    2020-10-20 13:15
    在网页开发中，经常需要实现一些层（Div）在浏览器中居中显示的效果，这种效果在弹窗对话框或提示信息中尤为常见。...此外，在生产环境中，我们还应当考虑性能优化、用户体验和交互设计等问题，以确保最佳的前端体验。
  • 前端~浮动
    2024-09-04 15:57
    鸘㸁的博客 div是块状元素，一个div都是独占一行,此时很多div元素在一排排列，就可以用到浮动，让竖着的盒子横着排列。
  • 基于jQuery实现左右div自适应高度完全相同的代码
    2020-10-28 00:02
    为了解决浮动元素带来的布局问题，使用了一个额外的类 `.clear` 在两个div之后来清除浮动。 jQuery部分，使用了一个简单的函数 `$(id)` 来快速获取DOM元素，这实际上是 `document.getElementById` 的一个封装，目的...
  • html两个div在相同高度,HTML/CSS：使两个浮动div的高度相同
    2021-06-16 04:29
    三尺黔首的博客 您可以通过应用大量的底部填充，相同数量的底部负边距和围绕具有溢出隐藏的div的列来获得CSS中的相等高度列。垂直居中的文本有点棘手，但这应该帮助你的路上。#container {overflow: hidden;width: 100%;}#left-col ...
  • 前端DIV布局浮动问题解决
    2019-01-21 11:37
    ROBIN.FANG的博客 固定布局（将网页主体部分长度设置成固定的值，然后配合浮动技术实现布局） //CSS文件 body,div,ul,ol,li,dl,dd,h1,h2,h3,form,input,textarea,p,img{ //很多块级元素都有默认的外边距 margin:0px; padding:0px;...
  • 前端开发：盒子的浮动与清除浮动及高度塌陷详解
    2024-10-26 10:00
    lin每一根发丝都在飞翔的博客 浮动与清除浮动以及高度塌陷是前端开发中常见且重要的问题。通过深入理解浮动的概念、作用及其特性，以及掌握清除浮动的方法和解决高度塌陷的策略，我们可以更好地应对这些挑战，实现更加灵活和稳定的页面布局。在...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 11月16日
  • 已采纳回答 11月8日
  • 创建了问题 11月7日