【DIV+CSS】如何使DIV高度100%
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了【DIV+CSS】如何使DIV高度100%相关的知识，希望对你有一定的参考价值。
从数据库中查询数据，放在DIV中，当数据信息不多的时候，发现DIV高度没有充满整个屏幕，而我的目的是想让其高度都100% 试了很多方法还是不行，不知道那位朋友可以帮我解决这个问题，谢谢
2个办法：1.不用xhtml，用html，把xhtml的头部声明删除掉：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
-------上面那段不要，改为：<html>就可以了
2.如果你必须声明网页解析为xhml的话按下面方法：
html,bodyheight:100%;
给父级元素100%的高度后div才可以有高度
--------------------------------------------------------
你要这种效果最好是css结合js做最保险 参考技术A 楼上真是达人。。。。都不见代码就能给出解答- =
在下没那么狠 希望楼主给出源代码
如何使锚点填充其包含 div 的高度
【中文标题】如何使锚点填充其包含 div 的高度【英文标题】：How to make an anchor fill the height of its containing div 【发布时间】：2013-06-02 15:47:35 【问题描述】：我知道这对你们中的一些人来说真的很基础，但我没有足够的 CSS 知识来实现这一点。
我正在尝试制作我自己的微调器版本，它会与 jqueryui 主题挂钩，因此至少最初必须使用它们的类。我还需要使小部件能够动态更改其高度（和宽度）。
我的问题是我不知道如何调整按钮的大小以适应其容器的高度。如果我主动设置.ui-spinner div 的高度，则容器太小而无法容纳文本。如果我不这样做，那么 div 就更大了，所以锚点也需要很大，但我不知道有多大。使用开发人员工具查看它，我没有看到任何边距或填充来解释额外的大小。
我看到How to style an anchor tag to look like a button with the same height as the button? 不断弹出类似的问题，但我已经将样式设置为 inline-block。
这是我目前拥有的。我在http://jsfiddle.net/37za8/做了一个小提琴
HTML
<div class="ui-corner-all ui-widget ui-widget-content ui-spinner">
<a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
<span class="ui-icon ui-icon-minusthick"></span>
</a>
<input class="ui-spinner-input" style="margin: 0;" value="0" />
<a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
<span class="ui-icon ui-icon-plusthick"></span>
</a>
</div>
jQuery
var _selector = ".ui-spinner"
$(_selector + " .ui-spinner-input").css("height", "18px");
$(_selector + " a").css("height", "18px");
$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", "24px");
$(_selector + " span").css("margin-left", "4px");
只要结果是可动态调整的，我可以更改您所说的任何有帮助的内容。我相信这对你们大多数人来说很容易。提前致谢！
编辑
为了澄清，我试图最终模仿 jqueryui 微调器。我正在尝试制作一个可以在显示之前设置高度的小部件/组件。 jqueryui 处理它的一个简单示例是this fiddle。我构建的组件有一个 setHeight 函数，它将设置小部件的高度。就是在 jQuery 中设置高度的那两行。必须有某种方法来设置 css（或在必要时添加更多 jquery），以便我可以动态更改高度。
【问题讨论】：
你可以使用不同于 18px 的高度吗？我尝试了 24px，它看起来不错 - jsfiddle.net/37za8/1 哦，你已经回答过了：s 是的。碰巧当我将它设置为 18 时，框最终是 25 像素，所以 24-26 像素应该看起来不错。不过，这依赖于在开发工具中查找高度，然后进行硬编码。 所以你的问题是什么是正确的代码，可以推断出正确的像素数，这样你就不必硬编码了？ CSS怎么样？你能重新定义css吗？ 要么推断出正确的像素数，要么简单地让 css 手动完成。我可以改变任何东西，除了从 jqueryui 类开始的约束和高度可以动态调整。 【参考方案1】：可以计算容器的高度，插入到“a”元素的高度中：
var _selector = ".ui-spinner"
var _inputvar = 25;
$(_selector).css("height", _inputvar);
$(_selector).css("line-height", "1");
console.log($(_selector).height());
$(_selector + " a").css("height", $(_selector).height());
$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", _inputvar);
$(_selector + " span").css(display:"inline-block",position:"static",marginTop:(_inputvar/10)+"px");
http://jsfiddle.net/37za8/13/
请注意，我删除了输入高度，取决于您设置的字体，您可能需要将其放回原处。 可以根据预期的值范围优化边距顶部值，我认为在这种情况下除以 10 可以达到某个点
通过 CSS 你可以做到这一点（但这真的取决于你打算如何动态）
.ui-spinner
height: 25px;
.ui-spinner .ui-icon
left:4px;
.ui-spinner .ui-state-default
padding: 12px;
ui-spinner-input
width: 50px;
http://jsfiddle.net/37za8/9/
【讨论】：
这不是一个坏主意，但我无法让它动态工作 - jsfiddle.net/37za8/4 。如果我在输出之前设置了高度，它在控制台中是正确的高度，但仍然不好看。 为了更好地理解这一点，是否有某种代码可以动态设置高度？因为从外观上看，你真的不需要设置高度 这是一个简化版本。它旨在成为可以在多个应用程序中重用的组件。有些人希望它是 22 像素，有些人希望它是 28 像素。我需要能够将高度传递给它并让它正确绘制。 （我们可以假设我们不会传递小于字体的高度，但仅此而已。） 高度很容易适应，只需要将line-height固定为1，垂直对齐更难打破【参考方案2】：如果你混合使用 css 和 jquery，你应该能够实现你想要的：
css
.ui-spinner,
.ui-spinner > a,
.ui-spinner-input box-sizing:border-box;
.ui-spinner > a width:24px; text-align:center;
.ui-spinner span.ui-icon left:50%; margin-left:-8px;
.ui-spinner-input width:52px;
jquery
var spinner = $(".ui-spinner"),
children = spinner.children();
spinner.height(48); //added for test purposes (if you change the height it should change the inner object heights)
children.height(spinner.height() - 2); //minus 2 is because the box-sizing hasn't taken into account the borders for some reason
Example
【讨论】：
以上是关于【DIV+CSS】如何使DIV高度100%的主要内容，如果未能解决你的问题，请参考以下文章