堆棧內存溢出
  簡體   English   中英

如何自動調整<div>高度根據內容嗎？

[英]How to auto adjust the <div> height according to content in it?

 原文  2010-05-27 10:03:23  5   22    css/ html

問題描述

我有一個<div>需要根據其中的內容進行自動調整。 我怎樣才能做到這一點？ 現在我的內容來自<div>

我用於 div 的類如下

box-centerside  {
background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
float:left;
height:100px;
width:260px;
}

22 個解決方案

解決方案1
 89  2012-07-18 04:49:07

只需寫“最小高度：XXX;” 和“溢出：隱藏；” &你會擺脫這個問題 像這樣

min-height: 100px;
overflow: hidden;

解決方案2
 50 已采納  2010-05-27 10:07:18

嘗試使用以下標記而不是直接指定高度： 

 .box-centerside { background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float: left; min-height: 100px; width: 260px; }
 <div class="box-centerside"> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> This is sample content<br> </div>

解決方案3
 21  2013-10-17 06:30:40

寫吧：

min-height: xxx;
overflow: hidden;

然后div會自動取內容的高度。

解決方案4
 15  2011-12-01 17:13:19

我在需要調整大小的 DIV 中使用了以下內容：

overflow: hidden;
height: 1%;

解決方案5
 9  2013-02-11 10:04:14

我已經為我的項目做了一些高度的自動調整，我想我找到了一個解決方案

[CSS]
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;

這可以附加到您的css文件中的prime div （例如warpper，但不能附加到body或html ，因為頁面不會向下滾動）並由其他子類繼承並寫入它們overflow: inherit; 屬性。

注意：奇怪的是我的 netbeans 7.2.1 IDE 高亮overflow: inherit; 作為Unexpected value token inherit ，但所有現代瀏覽器都可以很好地讀取此屬性。

該解決方案非常適合

  • 火狐 18+
  • chorme 24+
  • 即 9+
  • 歌劇 12+

我不會在這些瀏覽器的早期版本上對其進行測試。 如果有人會檢查它，那就太好了。

解決方案6
 9  2010-05-27 10:06:22

只需使用以下

height:auto;

解決方案7
 8  2018-04-11 15:13:45

您可以嘗試，div 標簽將自動適應高度與里面的內容：

height: fit-content;

解決方案8
 4  2012-02-22 02:21:11

如果你還沒有得到答案，你的 "float:left;" 搞砸了你想要的。 在您的 HTML 中，在應用了浮動的結束標簽下方創建一個容器。 對於此容器，請將其作為您的樣式：

#container {
clear:both;
}

完畢。

解決方案9
 3  2010-05-27 10:06:26

不要設置height 。 請改用min-height和max-height 。

解決方案10
 3  2016-01-24 22:54:19

簡單的答案是使用overflow: hidden和min-height: x(any) px這將自動調整 div 的大小。

height: auto不起作用。

解決方案11
 2  2011-12-01 17:36:13

只需將高度設置為自動，這應該可以解決問題，因為 div 是塊元素，因此它們延伸到其中包含的任何元素的全寬和全高。 如果高度設置為自動不起作用，那么簡單地不要添加高度，它應該調整並確保 div 也沒有從它的父元素繼承任何高度......

解決方案12
 1  2012-09-04 09:49:51

將高度設置為最后一個占位符 div。

    <div class="row" style="height:30px;">
    <!--placeholder to make the whole block has valid auto height-->

解決方案13
 1  2016-06-07 13:38:31

Min- Height : (some Value) units

----僅在無法使用溢出的元素的情況下使用此情況，例如工具提示

否則，您可以根據需要使用溢出屬性或最小高度。

解決方案14
 1  2016-08-17 05:33:19

我剛用

overflow: hidden;

它對我很有效。 這個 div 有一些浮動的左 div。

解決方案15
 0  2015-01-28 17:49:14

我通過將元素在 div 中的位置設置為相對位置來解決我的問題；

解決方案16
 0  2010-05-27 10:06:35

<div>應該會自動擴展。 我想問題在於您使用的是固定height:100px; ，嘗試用min-height:100px;

解決方案17
 0  2018-04-20 06:46:12

height:59.55%;//先指定你的高度然后make overflow auto overflow:auto;

解決方案18
 0  2019-01-21 06:21:29

對我來說，在嘗試了以下 css 的所有工作后：

float: left; width: 800px;

通過在將元素放入 css 文件之前檢查元素來嘗試使用 chrome。

解決方案19
 0  2020-06-22 06:01:09

其中大部分都是很好的答案，但我覺得它們忽略了 Web 開發的一個不可避免的方面，即持續的頁面更新。 如果你想來給這個div添加內容怎么辦？ 你應該總是來調整div min-height嗎？ 好吧，在嘗試回答這兩個問題時，我嘗試了以下代碼：

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  height: auto; /* adjusts height container element according to content */
  width: 260px;
}

此外，如果您在此 div 周圍有具有諸如position: relative; ，因此它們將堆疊在此 div 的頂部，因為它具有屬性float: left; 為了避免這種堆疊，我嘗試了以下代碼：

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* number depends on how many columns you want for a particular screen width. */
  height: auto; /* adjusts height container element according to content */
}

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  height: auto; /* adjusts height container element according to content */
  width: 100%;
}

.sibling 1 {
  /* Code here */
}

.sibling 2 {
  /* Code here */
}

我的觀點是，我發現這種顯示網格的方法更適合響應式網站。 否則，有很多方法可以實現相同的目標； 但是編程的一些重要目標是使編碼更簡單、更易讀、更容易理解。

解決方案20
 0  2021-05-31 09:56:31

不再需要設置諸如min-height之類的設置，只需設置好：

overflow: hidden

解決方案21
 0  2022-06-10 07:22:14

您可以嘗試使用適用於每個瀏覽器fit-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fit According To Div</title>

    <style>
        .test {
            /* Use This Code */
            width: fit-content;
            block-size: fit-content;
            /* You Can Also Try height: fit-content */
            height: auto;

            border-radius: 13px;
            border-style: solid;        
            overflow: auto;
            border-color: rgb(174, 174, 235);
        }
    </style>

</head>

<body>
    <div class="test" autofocus>
        <form>
            <script src="https://checkout.razorpay.com/v1/payment-button.js" data-  payment_button_id="pl_JfhYZeSvyVFaIf" async></script> 
        </form>
    </div>
</body>
</html>

解決方案22
 0  2012-01-02 13:33:05

使用min-height而不是height

解決方案23
 -1  2018-02-11 10:10:56

只需使用此顯示類型： 

display: inline-block;

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何根據內容自動調整容器高度。 如何根據下一個兄弟高度自動調整DIV高度？ 如何根據子DIV中的內容自動調整父DIV的高度？ 根據內容自動調整div的高度 如何根據手風琴滑塊中的內容調整嵌套div的高度？ div CSS自動調整高度以適應內容 自動調整內容的div高度並管理響應 如何根據內容使div具有自動高度 自動調整div的高度 自動調整div的高度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM