我在流式布局网站中遇到旋转页眉问题:我希望根据浏览器窗口的高度调整此页眉。但是，现在，当我调整窗口大小时，文本的顶部溢出并被隐藏。
我发现这可能与视口(viewport)和 Bootstrap 3 的新“移动优先”方法有关，但否则我真的是瞎了眼。此外，应用 overflow : hidden 属性，但没有成功。
这是 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<header>
<h1>Welcome to Yd Design</h1>
</header>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
还有 CSS:
@import "bootstrap.min.css";
html {
min-height: 100%;
min-width: 100%;
position: relative;
}
body {
height: 100%;
width: 100%;
}
header {
position: absolute;
bottom: 0;
left: 0;
-moz-transform-origin : 0 0;
-webkit-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
transform-origin: 0 0;
-moz-transform : rotate(-90deg);
-webkit-transform : rotate(-90deg);
-ms-transform : rotate(-90deg);
-o-transform : rotate(-90deg);
transform: rotate(-90deg);
}
h1 {
font-size: 5.6em;
font-weight: bolder;
}
预先感谢您的回答!
编辑:
根据要求，我添加了一个 JSFiddle。为了兼容性，我还添加了浏览器特定的前缀。
最佳答案
这对我有用:
- 对于旋转的容器(在本例中为
<header>)，将其宽度设置为一个值，例如 500px。 - 然后，将父容器的 margin-top 设置为相同的值 (500px)。
作为一个完整的例子，我修改了你的 fiddle :http://jsfiddle.net/v6s9H/3/
补充说明:
对于动态宽度，需要做更多的工作。我建议旋转父容器并定位它，然后在标题上执行 float:right 操作，而不是在标题上设置宽度，而是在其中一个父容器上。简而言之，您可以通过尝试使用更多嵌套的 div 来实现动态宽度。
关于html - 旋转的文本溢出浏览器窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20938822/