【问题标题】:How to auto adjust the <div> height according to content in it?如何根据其中的内容自动调整 <div> 的高度?
【发布时间】:2010-05-27 10:03:23
【问题描述】:

我有一个&lt;div&gt;,需要根据其中的内容进行自动调整。我怎样才能做到这一点?现在我的内容来自&lt;div&gt;

我用的div类如下

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

【问题讨论】:

  • Height:auto 都不适合我,min-height: 也不适合我,我使用的是 mozilla firefox,最新版本

标签: css html


【解决方案1】:

只要写“最小高度:XXX;”和“溢出:隐藏;” &你将摆脱这个问题 像这样

min-height: 100px;
overflow: hidden;

【讨论】:

  • 绝招,谢谢。一方面的问题。如果我使用 PHP 或 AJAX 在页面中引入更多内容,这是否仍然有效,页面会扩展以适应内容高度吗?
  • 我从事这项工作已经 10 年了,我一直在想解决/预防这个问题!谢谢一百万!
  • 朋友们,我很高兴。
  • 我很想了解这种违反直觉的解决方案的基本原理。 CSS 如何证明 overflow: hidden; 让我看到更多的东西? (在我的例子中,没有它,包含块会缩小到它的高度,并且内容在底部会被截断。)
  • 即使这对我也不起作用。设置最小高度和/或溢出:隐藏对我不起作用。 div 只是没有扩展。
【解决方案2】:

尝试使用以下标记而不是直接指定高度:

.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>

【讨论】:

  • 如果有人还在使用ie6,那是他们自己的错,它坏了……
  • 我同意 Walterj89,但我也不同意 - IE6 应该 至少在 IE9 正常发布之前得到支持。总的来说,我认为没有人应该支持 IE。
  • Height:auto 都不适合我,min-height: 也不适合我,我使用的是 mozilla firefox,最新版本
  • 这在我的 FireFox 3.6 和 IE8 上运行良好 - 你运行的是哪个版本的 FireFox?
  • 我不知道为什么,但突然间它给了我我需要的输出......谢谢你的帮助......
【解决方案3】:

只写:

min-height: xxx;
overflow: hidden;

那么div会自动取内容的高度。

【讨论】:

    【解决方案4】:

    我在需要调整大小的 DIV 中使用了以下内容:

    overflow: hidden;
    height: 1%;
    

    【讨论】:

      【解决方案5】:

      我已经为我的项目自动调整高度,我想我找到了解决方案

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

      这可以附加到您的css文件中的主要div(例如warpper,但不能附加到bodyhtml,因为页面不会向下滚动)并由其他子类继承并写入它们@987654325 @ 属性。

      注意:奇怪的是我的 netbeans 7.2.1 IDE 将 overflow: inherit; 突出显示为 Unexpected value token inherit,但所有现代浏览器都可以正常读取此属性。

      这个解决方案非常适合

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

      我没有在这些浏览器的早期版本上测试它。如果有人会检查它,那就太好了。

      【讨论】:

        【解决方案6】:

        只需使用以下

        height:auto;
        

        【讨论】:

        • 很好的答案,但除非在树的较高层有冲突的声明,否则height 将默认为auto
        • Height:auto 都不适合我,min-height: 也不适合我,我使用的是 mozilla firefox,最新版本
        • -ve 给我垂直滚动条,我不想要
        【解决方案7】:

        你可以试试,div 标签会根据里面的内容自动调整高度:

        height: fit-content;
        

        【讨论】:

          【解决方案8】:

          如果你还没有得到答案,你的“float:left;”搞砸了你想要的。在您的 HTML 中,在应用了浮动的结束标签下方创建一个容器。对于此容器,请将其作为您的样式:

          #container {
          clear:both;
          }
          

          完成。

          【讨论】:

            【解决方案9】:

            不要设置height。请改用min-heightmax-height

            【讨论】:

            • Height:auto 都不适合我,min-height: 也不适合我,我使用的是 mozilla firefox,最新版本
            【解决方案10】:

            只需将高度设置为自动,这应该可以解决问题,因为 div 是块元素,因此它们会延伸到其中包含的任何元素的全宽和全高。如果高度设置为自动不起作用,那么简单地不要添加高度,它应该调整并确保 div 也没有从它的父元素继承任何高度......

            【讨论】:

              【解决方案11】:

              简单的答案是使用overflow: hiddenmin-height: x(any) px,这将自动调整 div 的大小。

              height: auto 不起作用。

              【讨论】:

                【解决方案12】:

                为最后一个占位符 div 设置高度。

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

                【讨论】:

                  【解决方案13】:
                  Min- Height : (some Value) units  
                  

                  ---- only 使用这种无法使用溢出的元素,例如 tooltip

                  否则你可以根据需要使用溢出属性min-height

                  【讨论】:

                    【解决方案14】:

                    我刚用过

                    overflow: hidden;
                    

                    它对我很有效。这个 div 有一些浮动的左 div。

                    【讨论】:

                    • 也为我工作。我将它与 height:auto;并显示:阻止;
                    【解决方案15】:

                    &lt;div&gt; 应该会自动展开。我想问题是你使用的是固定的height:100px;,尝试用min-height:100px;替换它

                    【讨论】:

                    • Height:auto 都不适合我,min-height: 也不适合我,我使用的是 mozilla firefox,最新版本
                    • 就像 Neurofluxation 所说,您需要在 box-centerside 之前有 .# 以匹配类或 ID。目前,您的代码与节点名称 box-centerside 的元素匹配 - 其中不存在。
                    • 我知道这段代码是从 firebug 复制过来的,因此没有显示为“.”
                    【解决方案16】:

                    使用min-height 代替height

                    【讨论】:

                      【解决方案17】:

                      我已通过将 div 中元素的位置设置为相对位置来解决我的问题;

                      【讨论】:

                        【解决方案18】:

                        height:59.55%;//首先指定你的高度然后让溢出自动 溢出:自动;

                        【讨论】:

                          【解决方案19】:

                          对我来说,在尝试了以下 css 的所有工作后:

                          float: left; width: 800px;
                          

                          通过在将元素放入 css 文件之前检查元素来尝试使用 chrome。

                          【讨论】:

                            【解决方案20】:

                            其中大部分都是很好的答案,但我觉得它们忽略了 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 */
                            }
                            

                            我的观点是,我发现这种显示方式更适合响应式网站。否则,有很多方法可以实现相同的目标;但编程的一些重要目标是让编码更简单、更易读、更容易理解。

                            【讨论】:

                              【解决方案21】:

                              min-height这样的设置不用再设置了,只要设置好就行了:

                              overflow: hidden
                              

                              【讨论】:

                                猜你喜欢
                                • 2012-04-23
                                • 1970-01-01
                                • 1970-01-01
                                • 1970-01-01
                                • 2020-02-01
                                • 2018-12-21
                                • 1970-01-01
                                • 1970-01-01
                                • 1970-01-01
                                相关资源
                                最近更新 更多