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

为什么我的浮动div高度不是100%？

发布于 2024-12-20 19:30:50 字数 630 浏览 0 评论 0原文

我想将 div 高度扩大 100%，但它不起作用：

在此处输入图像描述

到目前为止，我的代码是：

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}

HTML：

<div>

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
原文

I want to expand my div height by 100%, but it is not working:

enter image description here

So far, my code is:

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}

And the HTML:

<div>

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（2）

谢绝鈎搭 2024-12-27 19:30:50

您应该指定外部 div 的高度。像这样的事情会起作用：

<!doctype html>
<html>
<head>
<style>
.add
{
    border:1px solid #ddd;
    display:block;
    float:right;
    margin:0 0 10px 10px;
    padding:10px;
    height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
</body>
</html>

You should have specified the height of the outer div. Something like this will work:

<!doctype html>
<html>
<head>
<style>
.add
{
    border:1px solid #ddd;
    display:block;
    float:right;
    margin:0 0 10px 10px;
    padding:10px;
    height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
</body>
</html>
回复 原文
墨洒年华 2024-12-27 19:30:50

来自 CSS 2.1 规范：

百分比

指定百分比高度。百分比是根据生成的框的高度计算的
包含块。如果包含块的高度不是
明确指定（即，它取决于内容高度），并且这
元素不是绝对定位的，该值计算为“auto”。

因此，由于包含块没有指定高度，因此浮动元素的高度为 auto。

From the CSS 2.1 Spec:

percentage

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.

So, since the containing block has no specified height, the floated element's height is auto.

回复 原文
~没有更多了~

关于作者

绻影浮沉

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘曦

文章 0 评论 0

在梵高的星空下

文章 0 评论 0

善良天后

文章 0 评论 0

韬韬不绝

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

不美如何

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文