当前位置：文江博客话题详情

如何更改div的高度以覆盖文本区域（CSS）

发布于 2024-09-18 08:24:19 字数 256 浏览 4 评论 0原文

原始 CSS 代码 http://www.faressoft.org/BlueCristalTheme/postView.php

alt text

结果应为

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无力看清 2024-09-25 08:24:19

这里发生了一些事情：

您的评论框 div 的固定高度为 100px
该 div 内的所有元素都是绝对定位的，这使它们脱离了文档的正常流程，从而导致包含评论框的 div 无法换行/ 拉伸以适合子项
使用浮动或仅删除较大内容的定位，这看起来像第二个
。使用边距来定位此
，请参见下文，

我可以通过更改 CSS 来解决该问题，如下所示：

#comments .commentBox { /* style.css line 483 */
background-color:#DCDCDC;
/*height:100px; --removed this */
min-height:100px;
position:relative;
}

#comments .commentBox .comment-content { /* style.css line 523 */
color:#676767;
font-size:0.91em;
font-weight:bold;
line-height:24px;
margin:52px 92px 0 0; /* -- added this */
/* -- removed these
position:absolute;
right:95px;
top:52px;
width:570px;
*/
}

few things going on here:

your comment box div has a fixed height of 100px
all the elements inside this div are absolutely positioned, which takes them out of the normal flow of the document, which results in the containing comment box div not able to wrap / stretch to fit around the children
use floats or just remove the positioning for the larger content which looks like the second <p>. use margins to position this <p>, see below

I was able to fix the problem by changing your CSS as follows:

#comments .commentBox { /* style.css line 483 */
background-color:#DCDCDC;
/*height:100px; --removed this */
min-height:100px;
position:relative;
}

#comments .commentBox .comment-content { /* style.css line 523 */
color:#676767;
font-size:0.91em;
font-weight:bold;
line-height:24px;
margin:52px 92px 0 0; /* -- added this */
/* -- removed these
position:absolute;
right:95px;
top:52px;
width:570px;
*/
}

回复收藏 0 原文

吻风 2024-09-25 08:24:19

你想要clearfix hack。

将其添加到样式表中：

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

然后，将 class="clearfix" 添加到您的 div（或将 clearfix 添加到现有的 div 类），它应该正确清除该文本。

You want the clearfix hack.

Add this to your stylesheet:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

Then, add class="clearfix" to your div (or clearfix to your existing div class), and it should clear that text properly.

回复收藏 0 原文

~没有更多了~