調整div大小以匹配其他div的空格

基本上我想要做的是將固定寬度的一個div粘貼到右側，將固定高度的一個div粘貼到底部並使用一個div填充空格離開了。第三個div應該自動包裝文本，其他div應該調整它們各自的高度和寬度到容器。調整div大小以匹配其他div的空格

這是我到目前爲止有： https://jsfiddle.net/u0owp3jy/1/

body { 
 
     background-color: black; 
 
     box-sizing: border-box; 
 
    } 
 

 
    #wrapper { 
 
     display: table; 
 
     width: 50%; 
 
     height: 300px; 
 
     margin-top: 10px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
     border: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
    } 
 

 
    #flex { 
 
     background-color: blue; 
 
     /*width: calc(100% - 170px);*/ 
 
     width: auto; 
 
     float: left; 
 
     display: table-row; 
 
     height: 100%; 
 
     padding: 10px; 
 
     overflow-y: auto; 
 
    } 
 

 
    #static-left { 
 
     background-color: yellow; 
 
     float: right; 
 
     display: table-row; 
 
     height: 100%; 
 

 
     width: 140px; 
 
     border-left: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
     overflow-y: auto; 
 
    } 
 

 
    #static-bottom { 
 
     display: table-row; 
 
     background-color: green; 
 
     height: 50px; 
 
     width: 100%; 
 
     border-top: solid; 
 
     border-width: 3px; 
 
     border-color: red; 
 
    }

<div id="wrapper"> 
 
     <div id="flex"></div> 
 

 
     <div id="static-left"></div> 
 

 
     <div id="static-bottom"></div> 
 
    </div>

這樣做的事情是，以獲得正確的寬度爲靈活的div，我需要使用計算（）這是壞的，另一件事是，底部div的邊界不顯示。

另外，如果您顯然有width: auto;，則textwrapping不起作用。如果可能，我想只用CSS做到這一點。它也應該在移動瀏覽器上工作。

來源

2015-12-17 sollniss

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

這就是說...是固定的結構？...如果我們可以稍微調整結構，這非常簡單。 –

基本上我需要的是一種可調整大小的聊天窗口，右邊是靜態寬度的用戶列表，底部是靜態高度的文本輸入，另一個是主要文本顯示。我不知道需要調整多少。你能詳細說明一下嗎？ – sollniss

請嘗試以下解決方案。我用flexbox解決了這個問題。另外我爲你的CSS做了一些優化，以獲得更清潔和更好的CSS代碼。

body { 
 
    background-color: black; 
 
} 
 
.top-wrapper { 
 
    align-items:stretch; 
 
    align-self:flex-start; 
 
    display:flex; 
 
    flex-direction:row; 
 
    height:100%; 
 
    max-height:250px; 
 
    width:100%; 
 
} 
 
#wrapper { 
 
    align-items:stretch; 
 
    border:3px solid #f00; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap:nowrap; 
 
    height:300px; 
 
    margin:10px auto 0; 
 
    overflow:hidden; 
 
    width:50%; 
 
} 
 
#flex { 
 
    background-color:blue; 
 
    flex-grow:1; 
 
    overflow:auto; 
 
    padding:10px; 
 
    word-wrap:break-word; 
 
} 
 
#static-left { 
 
    background-color:yellow; 
 
    border-left:3px solid #f00; 
 
    overflow-y:auto; 
 
    width:140px; 
 
} 
 
#static-bottom { 
 
    background-color:green; 
 
    border-top:3px solid #f00; 
 
    box-sizing:content-box; 
 
    height:50px; 
 
    width:100%; 
 
}

<div id="wrapper"> 
 
    <div class="top-wrapper"> 
 
    <div id="flex"> 
 
     asdddddddddddd dddd dfdfd dfdfdfd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
    </div> 
 
    <div id="static-left"> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
     asd<br/> 
 
    </div> 
 
    </div> 
 
    <div id="static-bottom"> 
 
    asd<br/> 
 
    asd<br/> 
 
    asd<br/> 
 
    asd<br/> 
 
    </div> 
 
</div>

在這裏你可以找到小提琴：https://jsfiddle.net/sebastianbrosch/0ypmw3xz/

來源

2015-12-17 09:31:32

非常感謝。我仍然需要圍繞柔性盒包裹頭... 順便說一句，從編輯之前的版本似乎工作，但編輯的一個吃下邊的div。當它變得太長時，是否也可以包裝Flex div的文本，還是我需要在JavaScript中執行此操作？ – sollniss

您將代碼中的'max-height：250px;'更改爲'height：100％;'現在當我複製它時，底部div不再顯示。如果我將它改回來，它會起作用。單詞包裝就像一個魅力，謝謝。 – sollniss

是的，我看到了，我更新瞭解決方案。 –

調整div大小以匹配其他div的空格

回答

相關問題