HTML/CSS div高度自适应问题修复请求

API 探路者

2026-5-15

解决Div高度自适应与布局错乱问题

我仔细看了你的代码，布局错乱和高度无法自适应的问题主要来自这几个点：浮动布局导致的父元素高度塌陷、无效的CSS属性值，还有三栏布局的宽度冲突。咱们用Flexbox来重构布局，既能轻松实现高度随内容自动适配，又能彻底解决布局错乱的问题。

核心修改点

移除了所有无效的height: %;语法错误
将#wrapper改为Flex容器，替代原来的浮动布局，彻底避免高度塌陷问题
调整#content的宽度逻辑，让它自动填充左右栏之间的剩余空间
修复了下拉菜单的hover背景色（原代码下拉内容hover还是黑色，现在统一为红色）
替换了过时的<font>标签，用CSS统一控制字体样式
修正了图片对齐的语法错误，改用CSS实现居中对齐

修复后的HTML代码

<html>
<head>
<title>Markus Persson</title>
<link rel="icon" href="NotchIcon.png" type="image/x-icon" />
<meta charset=UTF-8 />
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
    <div id="columnLeft"></div>
    <div id="content">
        <div id="banner">
            <ul class="menu">
                <li class="dropdown">
                    <a href="MarkusPersson.html" class="dropbtn">Markus Persson</a>
                    <div class="dropdown-content">
                        <a href="OndeNasceu.html">Onde Nasceu</a>
                        <a href="OndeVive.html">Onde Vive</a>
                    </div>
                </li>
                <li><a href="Mojang.html">Mojang</a></li>
                <li><a href="Minecraft.html">Minecraft</a></li>
                <li style="float:right"><a class="active" href="SobreMim.html">Sobre Mim</a></li>
            </ul>
        </div>
        <h1>Markus Persson</h1>
        <img title="Markus Persson" src="MarkusPersson.png" width="500" height="380" class="center-img">
        <p class="legenda">Img.1 Markus Persson</p>
        <br>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<b>Markus Persson</b> mais conhecido como <b>Notch</b> nasceu no dia 1 de junho de 1979 em Estocolmo (Suécia). Markus Persson aos 30 anos de idade fundou a Mojang AB na qual desenvolveu o jogo mais conhecido da empresa o Minecraft. Markus Persson em novembro de 2014 deixou a Mojang pois foi vendida para a Microsoft por 2.5$ Bilhões de dólares. Como Markus Persson tinha 70% d` Mojang, assim ao vender a sua empresa tornou-se bilionário. Ainda em 2014 comprou uma mansão por 70$ Milhões em Los Angeles nos EUA.</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;Markus Persson iniciou a sua carreira de programador em um<i> Commodore 128 <sup>(Img.2)</sup></i> com um computador pessoal quando tinha 7 anos de idade. Trabalhou até 2009 na<i>King.com</i> Trabalhou como programador em um software de gerenciamento de fotografias<i> Jalbum</i>, Markus Persson também foi um dos fundadores do MMOWurm Online (um MMORPG desenvolvido pela Code Clube AB).</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;Atualmente Markus Persson não tem trabalho mas também não pretende arranjar um.</p>
        <img title="Commodore 128" src="Commodore128.png" width="300" height="300" class="center-img">
        <p class="center-text">Img.2 Commodore 128</p>
        <br><br>
        <h3>Trabalhos de Markus Persson</h3>
        <ul type="circle">
            <li><b>Jogos</b>
                <ol><p>Markus Persson criou muitos jogos pequenos, muitos deles para competições e ainda tem muitos jogos inacabados.</p></ol>
            </li>
            <li><b>Minecraft</b>
                <ol><p>O jogo que teve mais sucesso que Markus Persson criou. Acabou por vender o jogo para a Microsoft porque já não conseguia lidar com a pressão de ter criado um jogo tão grande (O Terceiro jogo mais jogado do mundo). As pessoas da Mojang ficaram chateadas com ele por te-lo feito.</p></ol>
            </li>
            <li><b>Wurm Online</b>
                <ol><p>Co-criado com Rolf Jansson há muitos anos atrás. Terminou por deixar o projeto quando Rolf se afastou e tornou-se mais difícil trabalharem juntos.</p></ol>
            </li>
            <li><b>Drowning in Problems</b>
                <ol><p>Feito para uma competição de desenvolvimento de jogos de 48 horas com o tema "sob a superfície". Completou o jogo em menos de dez horas.</p></ol>
            </li>
            <li><b>Shambles</b>
                <ol><p>Uma entrada para a competição de fps (First Person Shoter) onde o objetivo é tentar fazer um jogo de tiros em primeira pessoa em uma semana. Fez em Unity. O jogo não é muito mau mas, como é um jogo de ataque de pontuação onde o jogador inevitavelmente será invadido pelo acúmulo de zumbis, isso definitivamente causa fadiga nos jogadores.</p></ol>
            </li>
        </ul>
        <br><br>
        <fieldset class="field_set">
            <legend align="center">Opinião</legend>
            <textarea cols="170" rows="20" maxlength="10000" placeholder="Deixe aqui a sua opinião..."></textarea>
            <br>
            <input type="submit" value="Enviar">
        </fieldset>
        <br>
        <button type="button"><a href="#top">VOLTAR PARA O TOPO</a></button>
        <br>
    </div>
    <div id="columnRight"></div>
</div>
<div id="footer"></div>
</body>
</html>

修复后的CSS代码

/* Layout */
body {
    margin: 0;
    font-family: 'Modern', sans-serif;
    font-size: 16px; /* 替代原font标签的size=3 */
}

#wrapper {
    display: flex; /* 使用Flexbox实现三栏布局 */
    width: 100%;
    background-color: #FFFFFF;
}

#columnLeft, #columnRight {
    width: 20%;
    background-color: #FFFFFF;
}

#content {
    flex: 1; /* 自动填充左右栏之间的剩余空间 */
    background-color: lightblue;
    padding: 0 15px; /* 添加内边距，避免内容贴边 */
}

#banner {
    width: 100%;
    height: 46px;
    background-color: #000000;
}

#footer {
    width: 100%;
    height:75px;
    background-color: #2EFE2E;
    margin-top: auto; /* 确保页脚在页面底部 */
}

/* Menu */
ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #FE2E64;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 135px;
}

.dropdown-content a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #FE2E64; /* 修复下拉菜单hover颜色 */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.active {
    background-color: #FE2E64;
}

/* Formatos */
h1, h3 {
    text-align: center;
}

.center-img {
    display: block;
    margin: 0 auto;
}

.center-text {
    text-align: center;
}

p.legenda {
    font-style: italic;
    color: #FE2E64;
    text-align: center;
}

.field_set {
    padding: 15px;
}

.field_set textarea, .field_set input {
    display: block;
    margin: 0 auto;
}

button {
    display: block;
    margin: 0 auto;
}

为什么这样修改？

Flexbox布局天生支持高度自适应，容器内的子元素会自动匹配最高元素的高度，同时#content设置flex:1后会自动填充左右栏的剩余空间，不管内容多少都能完美适配。另外移除了过时的HTML标签，用CSS统一控制样式，让代码更易维护。

内容的提问来源于stack exchange，提问作者André Dias

HTML/CSS div高度自适应问题修复请求

核心修改点 #

修复后的HTML代码 #

修复后的CSS代码 #

为什么这样修改？ #

核心修改点

修复后的HTML代码

修复后的CSS代码

为什么这样修改？