Question

我试图让文字区域填满屏幕的剩余宽度。我已经很好地设置了一切，但似乎无法实现任何解决方案，以便在屏幕的其余部分实现它。

我故意不尝试修复所有页面的宽度/高度以动态调整某些内容（即主要内容区域设计为使用弹性框填充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>

感谢任何帮助，因为它让我发疯了

Answer 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>

Textarea 100％宽度的屏幕其余部分

1 个答案: