英文:
Why rotated html makes the div vertically scrollable?
问题
这是我想出来的代码，但找不到问题出在哪里。正如问题所暗示的，当旋转时，div 变得可以垂直滚动，这在我的情况下是不可取的。
另外，我希望在浏览器不是全屏时，内容会根据文本内容至少垂直调整大小。我想这应该是默认的，但甚至没有将包装器设置为 height: inherit;
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
transform: rotate(-90deg);
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p>你好，你好吗</p>
<p>你好，无论如何</p>
<p>你好，测试一下</p>
</div>
</div>
</body>
</html>
编辑： @Brett Donald 的答案适用于像我最初发布的小型 div，但对于较大的 div 不适用。
英文:
This the code I came up with but cannot find where the problem lies. As the question implies, when rotated, the div becomes vertically scrollable and it is not desirable in my case.
Additionally, I would like that when the browser is not on full screen the content shrinks to adjust only to the text content at least vertically. I would imagine it would happen by default but does not even set the wrapper to height: inherit;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
transform: rotate(-90deg);
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p>hello how are you</p>
<p>hello whatever here</p>
<p>hello testing this</p>
</div>
</div>
</body>
</html>
<!-- end snippet -->
Edit: @Brett Donald answer works with a small div like the one I initially posted but not with larger ones.
答案1
得分: 1
我看到你正在尝试旋转整个文档（HTML元素）。我不太惊讶这样做会引起问题。
如果可能的话，尽量旋转特定的元素，而不是整个文档。例如，如果你想让文本显示在视口的中心，然后逆时针旋转90度，你只需要旋转包裹的div。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
border: 2px solid black;
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p>你好，你好吗</p>
<p>你好，不管怎样</p>
<p>你好，测试一下</p>
</div>
</div>
</body>
</html>
英文:
Not sure exactly what you’re after. I see that you’re trying to rotate the entire document (the HTML element). I am not at all surprised that doing so is causing problems.
If at all possible, try rotating specific elements rather than the entire document. For example, if you want the text to display in the centre of the viewport, then be rotated 90° counter-clockwise, you only need to rotate the wrapper div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100svh;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
border: 2px solid black;
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p>hello how are you</p>
<p>hello whatever here</p>
<p>hello testing this</p>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论