Textarea 屏幕其余部分的 100% 宽度答案

【问题标题】：Textarea 100% width of rest of screenTextarea 屏幕其余部分的 100% 宽度
【发布时间】：2016-03-14 19:58:48
【问题描述】：

我正在尝试让文本区域填充屏幕的剩余宽度。我已经很好地设置了所有东西，但似乎无法实施任何解决方案来让它适应屏幕的其余部分。

我故意尝试不将所有页面的宽度/高度固定为动态适应某些内容（即主要内容区域设计为使用弹性框填充 100% 高度）

我已将我的代码剥离为布局基础：

    <html>
   <head>
      <style>
         *, *:before, *:after
         {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         }
         *
         {
         font-family: Arial !important;
         }
         html, body
         {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         background-color: #e6e6e6;
         }
         .flexbox-parent
         {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: flex-start; /* align items in Main Axis */
         align-items: stretch; /* align items in Cross Axis */
         align-content: stretch; /* Extra space in Cross Axis */
         overflow-x: hidden;
         }
         .fill-area-content
         {
         flex: 1; /* same as flex: 1 1 auto; */
         /* Needed for when the area gets squished too far and there is content that can't be displayed */
         overflow-y: auto; 
         overflow-x: hidden;
         }
      </style>
   </head>
   <body>
      <div class="flexbox-parent">
         <div style="width: 100%; display: block;">
            <div style="text-align: right; background-color: #666666;">
               TOP
            </div>
            <div style="border: #000000 thin solid; width: 162px; text-align: center; padding: 10px; margin: 10px; float: left;">
               LEFT
               AREA
            </div>
            <div class="fill-area-content" style="border: #000000 thin solid; text-align: center; padding: 10px; margin: 10px; ">
               <div style="float: left; ">
                  <div>
                     <div style="display: inline-block; background-color: green">
                        SOMETHING
                     </div>
                  </div>
               </div>
               <div style="float: left; padding-left: 5px; padding-right: 5px; text-align: right; background-color: orange">
                  SOMETHING
               </div>
               <div style="float: left; padding-left: 5px; padding-right: 5px; background-color: red ">
                  <textarea rows="12" id="notes" cols="35" > 
                  NEEDS TO BE 100% OF THE REST OF SCREEN
                  </textarea> 
               </div>
            </div>
         </div>
         <div class="fill-area-content"  style="background-color: #ffffff">
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
         </div>
      </div>
   </body>
</html>

感谢您的帮助，因为它让我发疯了

【问题讨论】：

你的 div 放错地方了！它应该在body标签内！
看起来像重复的stackoverflow.com/questions/1260122/…
代码很脏，很难解决。也许我可以从头开始重新创建这个架构。
您是说您甚至不希望“某些内容”具有 % 宽度吗？就像第一个“一些内容”的页面的 15%，第二个“一些内容”的 15%，然后文本框的剩余 %70？因为您正在使用浮点数，所以这将是......有趣的完成。您可能需要定义 % 宽度。
如果你去掉'float:left;'在其中包含“”的 div 上，并添加一个“margin-left: 204px;”相反，你会得到一个全宽的文本区域......或者是你试图避免做的事情？ <a href="/default/index/tourl?u=aHR0cHM6Ly9qc2ZpZGRsZS5uZXQvdWtmTGtxZWQv" rel="nofollow" target="_blank">jsfiddle.net/ukfLkqed</a> 或者如果你切换到 % 而不是固定宽度的 167px 左侧区域，像这样：<a href="/default/index/tourl?u=aHR0cHM6Ly9qc2ZpZGRsZS5uZXQvdWtmTGtxZWQvMS8%3D" rel="nofollow" target="_blank">jsfiddle.net/ukfLkqed/1</a>。我不确定您是否能够修复左侧区域的宽度，然后以 100% 的剩余宽度浮动元素而不给它们匹配的宽度

标签： html css forms textarea flexbox

【解决方案1】：

我重新创建了您的布局，因为您的代码有点难以理解。

*, *:before, *:after{
  box-sizing: border-box;
}

.top{
  text-align: right;
  background: gray;
}

.flex-container{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 10px 0;
}
.left-area, .right-area{
  border: 1px solid black;
  padding: 10px 5px;
}

.left-area{
  width: 18%;
  text-align: center;
}

.right-area{
  width: 78%;
}

.sm-1, .sm-2{
  display: inline-block;
}

.sm-1{
  background: green;
}

.sm-2{
  background: yellow;
}

.textarea-container{
  background:red;
  padding: 5px 10px;
  margin-top: 5px
}

.textarea-container textarea{
  width: 100%;
}

<div class="top">Top</div>

<div class="flex-container">
  <div class="left-area">LEFT AREA</div>
  <div class="right-area">
    <div class="sm-1">Something</div>
    <div class="sm-2">Something</div>
    
    <div class="textarea-container">
      <textarea cols="30" rows="10">Hello this is a texarea</textarea>
    </div>
  </div>
  
</div>

【讨论】：

感谢您的帮助。左侧区域需要固定宽度，但右侧区域需要 100%。文本区域（红色区域需要位于两个东西框的右侧......如果这有意义吗？