Question

我在流体布局网站中遇到旋转标题的问题：我想根据浏览器窗口的高度调整此标题。但是，现在，当我调整窗口大小时，文本的顶部会溢出并隐藏。

我发现它可能与视口和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。我还添加了浏览器特定的前缀以实现兼容性。

http://jsfiddle.net/smpte11/v6s9H/

Answer 1

这对我有用：

对于已旋转的容器（在本例中为<header>），将其 width 设置为值，如500px。
然后，将父容器的 margin-top 设置为相同的值（500px）。

作为一个完整的例子，我修改了你的小提琴：http://jsfiddle.net/v6s9H/3/

额外说明：

对于动态宽度，需要更多工作。我建议旋转父容器并定位它，然后在标题上执行 float：right ，在标题上没有设置宽度，而是在其中一个父容器上。简而言之，您可以通过尝试更多嵌套的div来实现动态宽度。

旋转的文本溢出浏览器窗口

1 个答案: