CSS 使文本高度为 div 的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10718840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make text height 100% of div?
提问by Daniel
I'm trying to make the text 100% height of a divbut it doesn't work.
It just becomes 100% of the body { font-size:?; }.
我正在尝试使文本的高度为 a 的 100%，div但它不起作用。
它只是成为body { font-size:?; }.
Is there any way to make it follow the div height?
The divheight is 4% of the whole page and I wan't the text to follow it when you resize/change resolution.
有没有办法让它跟随div的高度？
该div高度是整个页面的4％，我wan't文本跟随它，当你调整大小/分辨率的变化。
采纳答案by Daniel
To get the result I wanted, I had to use this code:
为了得到我想要的结果，我不得不使用这个代码：
// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');
// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
// Get the current height of the div and save it as a variable.
var height = $div.height();
// Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');?
Thank you joshuanhibbert@css-tricks for the help!
感谢 joshuanhibbert@css-tricks 的帮助！
回答by Libin
Using CSS you cannot achieve this. Instead of that use javascript.
使用 CSS 你无法做到这一点。而不是使用javascript。
Check these:
检查这些：
回答by andyError
In 2015, you can use viewport units. This will allow you to set the font size in height units representing 1% of the viewport height.
在 2015 年，您可以使用视口单位。这将允许您以代表视口高度的 1% 的高度单位设置字体大小。
So in your case font-size: 4vhwould achieve the desired effect.
所以在你的情况下font-size: 4vh会达到预期的效果。
Note: this wouldn't be relative to the parent div, as you asked, but relative to the viewport height.
注意：正如您所问的，这不会与父 div 相关，而是与视口高度相关。
回答by José Lozano Hernandez
If you want a text with 100% size of the div using CSS only, you must change the font-size and line-height properties. Here goes my solution:
如果您只希望使用 CSS 获得 100% div 大小的文本，则必须更改 font-size 和 line-height 属性。这是我的解决方案：
.divWithText {
background-color: white;
border-radius: 10px;
text-align: center;
text-decoration: bold;
color: black;
height: 15vh;
font-size: 15vh;
line-height: 15vh;
}
回答by Andrey Izman
You can do it for single line texts using relative and absolute positions:
您可以使用相对和绝对位置对单行文本执行此操作：
<div class="div">
<span class="middle-center">
Center text
</span>
</div>
css:
css：
.div {
height: 4%;
position: relative:
overflow: hidden;
}
.middle-center {
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 13px;
margin-top: -8px;
}
回答by CSS Guy
try this
尝试这个
font
{
position:absolute;
width:100%;
height:100%;
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
font-weight:normal;
}
