文章/答案/技术大牛

发布

css div高度自适应浏览器

基础概念

CSS中的div元素高度自适应浏览器指的是让div元素的高度根据浏览器窗口的大小自动调整，以适应不同的屏幕尺寸和分辨率。这种自适应设计有助于提高用户体验，确保网页内容在不同设备上都能良好显示。

类型

百分比高度：通过设置div的高度为百分比，使其相对于父元素的高度进行自适应。
视口单位高度：使用vh（视口高度）单位，使div的高度相对于视口高度进行自适应。
Flexbox布局：利用Flexbox布局的特性，使div元素在容器中自动调整高度。
Grid布局：使用CSS Grid布局，通过定义网格容器和网格项，实现高度自适应。

应用场景

响应式网站：适用于需要适应不同屏幕尺寸的网站，如新闻网站、电商网站等。
移动应用：在移动设备上，自适应高度可以确保内容在不同屏幕尺寸下都能良好显示。
仪表盘和数据可视化：在需要展示大量数据的仪表盘和数据可视化应用中，自适应高度可以提高数据的可读性和用户体验。

示例代码

百分比高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Percentage Height</title>
    <style>
        .container {
            height: 50vh; /* 50% of viewport height */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        This div's height is 50% of the viewport height.
    </div>
</body>
</html>

Flexbox布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh; /* 100% of viewport height */
        }
        .item {
            flex: 1; /* Takes up remaining space */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

遇到的问题及解决方法

问题：`div`高度没有自适应

原因：

没有设置高度单位或使用了固定高度。
父元素的高度没有设置或设置为固定高度。

解决方法：

使用百分比、视口单位（vh）等相对单位设置高度。
确保父元素的高度设置为自适应或百分比高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Height Auto Adjust</title>
    <style>
        html, body {
            height: 100%; /* Ensure the body takes full height */
            margin: 0;
        }
        .container {
            height: 100%; /* Set container height to 100% of body */
            background-color: lightgray;
        }
        .content {
            height: 100%; /* Set content height to 100% of container */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            This div's height is auto-adjusted.
        </div>
    </div>
</body>
</html>

参考链接

通过以上方法，可以实现div元素的高度自适应浏览器，提升网页的响应式设计和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

Android scaling javascript

javascript、android

嗨，有人能告诉我如何让这段javascript代码在浏览器上全屏显示吗？代码运行良好，但在较大的devices...not上看起来太小了。请确定要更改的内容，谢谢您的帮助:) <style type="text/cssfunction ksa8Ball() self.clearTimeout(t0

浏览 0提问于2012-04-15得票数 1

回答已采纳

1回答

使用CSS调整元素大小？

jquery、html、css、resize、viewport

您可以根据其父元素的宽度调整元素的宽度，但是否可以根据其父元素的高度来调整元素的宽度？(不使用视口变量)这方面的应用程序是通过设置元素的宽度和高度(相对于父元素的高度，而不是宽度)来保持在自适应布局中的高宽比。我正在尝试一种解决方案，不使用视口变量，如'vw‘或'vh’，因为不稳定的浏览器支持。向jquery开放，但如果可能的话想避免.

浏览 7提问于2015-12-21得票数 0

回答已采纳

2回答

Drupal7.9与柔性图像

media

Drupal7.9重新引入了图像的高度和宽度属性-我知道这有助于提高前端性能，但它给我带来了问题，而使用灵活的图像在静脉的响应性网页设计。这与whitefleaCH在这篇文章中提到的问题相同：如何防止图像上的高度/宽度属性在主题系统中运行？在CSS中使用最大宽度仍然可以缩放图像，但是高度仍然是标记中定义的。有没有人知道如何在CSS中纠正这一点，或者一起从图像中删除高度/宽度属性？

浏览 0提问于2011-11-06得票数 7

1回答

在移动端播放时利用html代码如何设置 width 与 height？

html

我现在设置width自适应但是高度貌似啦的很长。设置高度自适应 出行的形态更诡异都变形了。这个一般怎么处理？还有 html 自己生成的代码里面的div的宽度高度如何定义的？

浏览 359提问于2016-03-29

1回答

纯CSS溢出解决方案:窗口大小更改时自动和最大高度设置

css

假设有两个div。A是静态的，但B会在窗口更改时自适应其高度。一般来说，这很容易实现，但如果内容不适合B，我需要垂直滚动条，所以如果窗口大小改变，我目前通过Javascript更改最大高度选项，并使用overflow:auto作为B的css。因为计算高度会变得复杂，如果你有子-子-子...组件。例如，使用position:fixed不会触发滚动条。

浏览 3提问于2015-12-12得票数 0

1回答

不寻常的边框css

html、css

像这样高度自适应的边框该怎么做？它能是纯css吗？

浏览 0提问于2017-02-20得票数 0

4回答

在父div上使用.height()后，更改高度的子元素不再影响父元素的高度，为什么？

javascript、jquery、height

我有一个带一些子div的父div。在不对父div执行任何操作的情况下，如果我对父div中的任何子级调用以下代码：父div将基于其子div的所有高度符合新的高度。但是，如果我像这样设置父对象的高度：然后以与上述相同的方式更改任意子对象的高度

浏览 0提问于2012-05-15得票数 0

回答已采纳

2回答

如何使用css在调整浏览器窗口大小时使子div可滚动

html、css

<div id="div1"> // content set the height of div 2</div> 当我调整浏览器大小时，我现在坚持让我的孩子div可滚动。div1将根据浏览器窗口<e

浏览 4提问于2014-09-18得票数 1

2回答

如何让我的div成为浏览器窗口的最小高度，同时又能增长

jquery

我正在使用这个jQuery，它检测浏览器窗口的高度，并将div的高度设置为相同的高度，但我遇到了一个问题。我的问题是div只能达到浏览器窗口的高度，但不会更长。我需要div是浏览器窗口的最小高度，但如果需要，可以持续更长时间目前问题看起来是这样的：$(function(){ $('.projects-about') .<e

浏览 1提问于2013-05-20得票数 0

回答已采纳

1回答

仅使用CSS将div高度设置为浏览器的高度

html、css、height

*我正在使用CSS 进行布局，只使用。<div id="header"></div> <div id="content&quo

浏览 2提问于2014-04-27得票数 2

回答已采纳

1回答

CSS自适应高度问题

css

我在建立一个自适应网站时遇到了一些问题。看看它应该是什么样子： .HTML { height: 100%; margin-top我需要它是响应性的，因为图像的高度也是响应性的，所以搜索框应该适应徽标的高度，因为他们的底部是对齐的。此外，我还有另一个类，它的高度应该是头部高度的5%，但当我给它高度:5%时，它在Chrome23中的高度是0

浏览 1提问于2012-11-28得票数 0

2回答

等待元素出现在TestCafe中的静态按钮上

testing、automated-tests、e2e-testing、testcafe、ui-testing

我的网站上有一个奇怪的TestCafe行为。我在一个网站上有两个复选框和一个按钮，只要我点击它，它就会把我带到下一步。当页面加载时，de按钮是可见的，并且在任何时候都不会被操纵。<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">

浏览 0提问于2017-12-06得票数 3

1回答

Microsoft Bot Framework，Adaptive 1.1，media play按钮根本不正确显示，在移动上没有响应正确的单击

c#、botframework、bots、adaptive-cards

Bot显示了一个自适应卡(1.1版)。从自适应卡站点上的“产品视频”样本中获取视频的标记。1)在网络聊天(Win10，所有主要浏览器)中，"play“图标没有正确显示。手动编辑Chrome工具中的高度和宽度值，并将值设置为1px，就像测试一样，会使图标正确显示，但是2)更重要的是，在手机上，

浏览 3提问于2020-05-15得票数 0

回答已采纳

1回答

调整窗口大小时以chrome格式更改div高度

javascript、jquery、css、twitter-bootstrap、cross-browser

.content-block类包含动态文本，因此每个div块的高度都不同。使用javascript找到div的最大高度，将其应用于其他div，以便浏览器调整所有div的高度。下面的伪代码可以在大多数浏览器中工作，但在chrome中，浏览器的大小小于320x480将无法工作。return $(this).height();}

浏览 0提问于2013-11-08得票数 0

2回答