html - Div 高度 100% 的内容

标签 html css height

我有一个简单的问题要问 CSS 专家，这个问题毁了我的周末。 基本上我有一个 div，左边有一个图像，右边有一些文本。 我需要框的高度与内容文本相同，因此例如在下面的图像中，最后一行在框外，而我需要框的高度与内容相同。

我不能使用固定高度，因为文本可以在框中更改，我只需要一个已经定义的最小高度。

有大师可以帮助我吗？

<a href="#" class="myClass">
    <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
        <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
        </div>
    </div>
    <div class="centered-text-area clearfix">
        <div class="centered-text">
            <div class="myClass-content">
                <div class="ctaText" style="float:left;">
                    UpNeXt
                </div>
                <div style="clear:both;"></div>
                <div class="postTitle" style="float:left;">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                </div>
            </div>
        </div>
    </div>
</a>

这是<style>

.myClass 
, .myClass .postImageUrl 
, .myClass .imgUrl 
, .myClass .centered-text-area {
    min-height: 100px;
    position: relative;
}
.myClass
, .myClass:hover
, .myClass:visited
, .myClass:active {
    border:0!important;
}
.myClass {
    display: block;
    transition: background-color 250ms;
    webkit-transition: background-color 250ms;
    width: 100%;
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #eaeaea;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active
, .myClass:hover {
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #FFFFFF;
}
.myClass .postImageUrl
, .myClass .imgUrl {
    background-position: center;
    background-size: cover;
    float: left;
    margin: 0;
    padding: 0;
}
.myClass .postImageUrl {
    width: 30%;
}
.myClass .imgUrl {
    width: 100%;
}
.myClass .centered-text-area {
    float: right;
    width: 70%;
}
.myClass .centered-text {
    display: table;
    min-height: 100px;
    left: 0;
    position: absolute;
    top: 0;
}
.myClass .myClass-content {
    display: table-cell;
    margin: 0;
    padding: 0 74px 0 18px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
.myClass .ctaText {
    border-bottom: 0 solid #fff;
    color: #34495E;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .125em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}
.myClass .postTitle {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}
.myClass .ctaButton {
    background-color: #FFFFFF;
    margin-left: 10px;
    position: absolute;
    right: 0;
    top: 0;
}
.myClass:hover .imgUrl {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.myClass .imgUrl {
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    -moz-transition: -moz-transform 0.4s ease-in-out;
    -o-transition: -o-transform 0.4s ease-in-out;
    -ms-transition: -ms-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

您可以在这里找到问题 http://jsfiddle.net/L26s1vc5/

这是我现在看到的 enter image description here

虽然这是我期望的: enter image description here

最小高度为 100 像素。 我已经用 height:100%, overflow-y:auto, height:auto 测试过但没有成功:(

谢谢你的帮助，Alex。

最佳答案

您有两个问题导致了您的问题。你有一个清算问题和一个绝对定位问题。在 .myClass 中，您有两个 float 的 div。仅此一项就会导致您遇到的问题。您甚至尝试在两个地方修复它。您在一个地方添加了一类 clearfix(只有当您有匹配的 css 规则时才有效)。您还有一个内联样式为 clear: both; 的空 div，但要使其正常工作，您需要将其作为链接中的第三个 div。

尽管如此，即使以上任何一项都正常工作，问题也不会得到解决。这是因为您在 .centered-text 上的绝对定位。当您绝对定位某些内容时，您会将其从文档流中移除。这意味着它的 parent 不知道里面的东西有多大。您所有的尺寸都来自您对 min-height: 100px 的自由使用。如果您删除 .centered-text 上的绝对定位并正确使用 clearfix，那么您的代码就可以正常工作。

.myClass,
.myClass .postImageUrl,
.myClass .imgUrl,
.myClass .centered-text-area {
  min-height: 100px;
  position: relative;
}
.myClass,
.myClass:hover,
.myClass:visited,
.myClass:active {
  border: 0!important;
}
.myClass {
  display: block;
  transition: background-color 250ms;
  webkit-transition: background-color 250ms;
  width: 100%;
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #eaeaea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active,
.myClass:hover {
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #FFFFFF;
}
.myClass .postImageUrl,
.myClass .imgUrl {
  background-position: center;
  background-size: cover;
  float: left;
  margin: 0;
  padding: 0;
}
.myClass .postImageUrl {
  width: 30%;
}
.myClass .imgUrl {
  width: 100%;
}
.myClass .centered-text-area {
  float: right;
  width: 70%;
}
.myClass .centered-text {
  display: table;
  min-height: 100px;
  /* Removed absolute positioning*/
}
.myClass .myClass-content {
  display: table-cell;
  margin: 0;
  padding: 0 74px 0 18px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}
.myClass .ctaText {
  border-bottom: 0 solid #fff;
  color: #34495E;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .125em;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}
.myClass .postTitle {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.myClass .ctaButton {
  background-color: #FFFFFF;
  margin-left: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.myClass:hover .imgUrl {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.myClass .imgUrl {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -o-transition: -o-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

/* Added clearfix class here so that it can work properly*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
<a href="#" class="myClass clearfix"><<!-- moved clearfix here so it can take effect for the necessary area -->>
  <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
    <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
    </div>
  </div>
  <div class="centered-text-area">
    <div class="centered-text">
      <div class="myClass-content">
        <div class="ctaText" style="float:left;">
          UpNeXt
        </div>
        <div class="postTitle" style="float:left;">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat
        </div>
      </div>
    </div>
  </div>
</a>

我所做的一切都删除了所说的绝对定位(它没有做我能告诉的任何事情)，将您的 clearfix 移动到正确的位置，删除了您的额外 div(也是一个 clearfix 尝试)并在末尾添加了一个 clearfix 类你的 CSS。

看起来您已尝试做很多事情来使这段代码工作。您可能想要浏览并查看正在执行的操作，其中很多看起来根本没有执行任何操作。

关于html - Div 高度 100% 的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31235409/

上一篇：html - 使用来自 REST 服务的数据时，分页不适用于智能表

下一篇：html - 背景图像、填充和边框

相关文章：

css - 我怎样才能得到圆 Angular 以适应其他内容？

javascript - 为什么在悬停时更改源时这些 SVG 图像无法正确加载？

jquery - 如何使用 jquery 将值更改为类型文件的输入字段

jquery - Swiper 在 Jquery Mobile 中不工作

css - rtl 中的 ExtJS 在 chrome 中有问题

html - float 和高度之间有什么问题:100% of divs

css - 如何在不对抗 CSS 的情况下实现这种布局

javascript - 按类名选择动态更改的元素

html - 使用 'vertical-align' 在 div 中居中文本不起作用

c# - 在 WinForms WebBrowser 中编辑 CSS

©2024 IT工具网  联系我们