Question

http://jsfiddle.net/Dmb7v/ :

<body>
<div class="Shell">
    <div class="Main">
        <div class="Header">
        <p>Name Surname</p>
        <p>G123456789</p>
        </div>
        <div class="Content">
        <p>VIEW NAVIGATION</p>
            <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
            <li>Menu Item 5</li>
            <li>Menu Item 6</li>
            <li>Menu Item 7</li>
            <li>Menu Item 8</li>
            <li>Menu Item 9</li>
            <li>Menu Item 10</li>
            </ul>
        </div>
    </div>
    <div class="Pane">
        <div>
            <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
        </div>
        <div>
        <span class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</span>
        </div>
    </div>
</div>
</body>

和CSS：

* {
    padding: 0;
    margin : 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}

.Shell {
    height: 100%;
}

.Main {
    width: 332px;
    height: 100%;
    background-color: #ffcccc;
    border: 2px solid red;
    float: left;
}

.Header {
    width: 332px;
    height: 56px;
    background-color: #ccccff;
    border: 2px solid blue;
}

.Content {
    width: 332px;
    background-color: #ccffcc;
    border: 2px solid green;
}

.Pane {
    height: 100%;
    width: 48px;
    background-color: #ffffcc;
    border: 2px solid yellow;
    overflow: visible;
    float: left;
}

.PaneText {
    -webkit-transform: rotate(90deg);
    font-size: 30px;
    white-space: nowrap;
    display: block;
    height: 100%;
    width: 48px;
}

我在屏幕左侧建立了一个非常基本的菜单。我将在菜单的右侧垂直向下移动文本。文本完整呈现，但内部的DIV不会。

我做错了什么？我找到了各种各样的建议但没有成功。建议如下：

html, body {
min-height:100%;  
height:auto;  
height:100%;
}

他们都没有奏效。我做错了什么？

DIV不会渲染浏览器视口，但文本会

0 个答案: