我已经被这个问题困扰了好几天了，基本上无法解决它我在一个具有以下属性的 div 中有一个带有垂直文本的页面：
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}这是一个很长的文本（整个段落）
我想要实现的是这个文本占据了页面的整个高度（这个 div 是正文中的第一个标签）
当我尝试给它时：
height: 100%;它需要视口的高度并在关于我如何做到这一点的任何建议后立即停止？谢谢你们
编辑：添加可重现的页面
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>回答1
她你去。
我选择增加 font-size 和 line-height 你可以选择任何你认为适合你的要求，
var $div = $('.main-text');
$(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');.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div class="main-text" style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>