Html 自动拉伸Div的垂直文本_Html_Css

Html 自动拉伸Div的垂直文本

html css

Html 自动拉伸Div的垂直文本,html,css,Html,Css,我在尝试建立下面的模型时遇到了一个大问题。深灰色将保持导航，浅灰色将垂直向下显示文本。浅灰色的文本会有所不同，但它所在的Div应该始终与网页一样高有人能帮忙吗这就是我到目前为止所做的： <head> <style type='text/css'> .wrapper{ position: relative; float: left; left: 0%; wi

我在尝试建立下面的模型时遇到了一个大问题。深灰色将保持导航，浅灰色将垂直向下显示文本。浅灰色的文本会有所不同，但它所在的Div应该始终与网页一样高

有人能帮忙吗

这就是我到目前为止所做的：

<head>
    <style type='text/css'>
        .wrapper{
           position: relative;
           float: left;
           left: 0%;
           width: 100%;
           background-color: #cccccc
        }
        .left1{
           position: relative;
           float: left;
           left: 0;
           width: 332px;
           background-color: #ffffcc
        }
        .left2{
           position: relative;
           float: left;
           left: 0.00%;
           width: 48px;
           background-color: #ccffcc
        }
        .PaneText {
            -webkit-transform: rotate(90deg);
            white-space: no-wrap;
        }

        body {
           border-width: 0px;
           padding: 0px;
           margin: 0px;
           font-size: 90%;
           background-color: #e7e7de
        }
    </style>
</head>
<body>

    <div class="wrapper">
        <div class="left1">
            left1
        </div>
        <div class="left2">
            <div>
            <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
        </div>
        <div>
        <p class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</p>
        </div>
        </div>
    </div>
</body>


.包装纸{
位置：相对位置；
浮动：左；
左：0%；
宽度：100%；
背景色：#中交
}
.left1{
位置：相对位置；
浮动：左；
左：0；
宽度：332px；
背景色：#ffffcc
}
.left2{
位置：相对位置；
浮动：左；
左：0.00%；
宽度：48px；
背景色：#ccffcc
}
.PaneText{
-webkit变换：旋转（90度）；
空白：无换行；
}
身体{
边框宽度：0px；
填充：0px；
边际：0px；
字体大小：90%；
背景色：#e7e7de
}
左1
我的团队的请求/由我的直接下属管理/完成流程/完成流程/完成流程/完成流程

我知道很多样式都是多余的。只是看不出我做错了什么。

代码的结构似乎与您提供的模型不同，但是，我对您的代码进行了一些修改，以适应模型，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      html,
      body,
      .wrapper,
      .left1,
      .left2,
      .left3 {height: 100%}

      .wrapper {background-color: #cccccc; overflow: hidden}
      .left1 {float: left; width: 332px; background-color: #ffffcc}
      .left2 {float: left; width: 48px; background-color: #ccffcc}
      .left3 {float: left}
      .PaneText {transform: rotate(90deg); white-space: nowrap}
      body {margin: 0px; font-size: 90%; background-color: #e7e7de}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="left1">
        left1
      </div>
      <div class="left2">
        <p class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</p>
      </div>
      <div class="left3">
        <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
      </div>
    </div>
  </body>
</html>


html，
身体
.wrapper，
.1，
.2，
.left3{高度：100%}
.wrapper{背景色：#cccccc；溢出：隐藏}
.left1{float:left；宽度：332px；背景色：#ffffcc}
.left2{float:left；宽度：48px；背景色：#ccffcc}
.left3{float:left}
.PaneText{transform:rotate（90度）；空白：nowrap}
正文{margin:0px；字体大小：90%；背景色：#e7e7de}
左1
我的团队的请求/由我的直接下属管理/完成流程/完成流程/完成流程/完成流程

从上面的代码中您可能会注意到，要获得完整的文档高度，必须将每个父div设置为100%高度（包括一直到元素的高度）

您还遇到了一些HTML错误，这些错误可能阻碍了您的工作。

您的css中出现了一些错误，请查看此错误

同样

空白：无换行应该是空白：nowrap这就是你的文本被破坏的原因。
你的工作非常出色，谢谢。但是我们怎么能让背景div一直延伸到文本呢？@HawarKarem就像你说的，你不知道文本的长度，而且它会变化，根据你当前的标记很难做到这一点。为了实现这一点，你需要重新安排你的整个HTML标记。我知道这有点作弊，但你对我能做什么有什么建议吗？这是我一直坚持的主要问题。最简单的方法是使用javascript或jquery计算文本长度并将其应用于身体。对此我深表歉意。欣赏正确的结构。