保證金似乎不能正常工作

好的，我會保持簡短，我試圖實現的是我想在我的網站側邊聊一個側欄，但現在我試圖向每一邊添加一些邊距，以便它關閉，雖然這似乎不能正常工作，但代碼如下。保證金似乎不能正常工作

HTML

<div class="inner-chat"> 
    <div class="chat-box-messages"> 
     //Messages 
    </div> 

    <div class="chat-box-input"> 
     //Field to input 
    </div>    
</div>

CSS

.inner-chat{ 
    margin:1vw; 
} 

.chat-box-messages{ 
    height:80%; 
    background:yellow; 
} 

.chat-box-input{ 
    height:20%; 
    background:green; 
}

然後代碼生成此，

最邏我想說的是，因爲保證金在推動每一方都在推動，但我不知道如何以另一種方式解決這個問題。

來源

2017-04-15 Martijn Ebbens

我認爲問題在於您使用'％'來定義'div'的高度。嘗試使用'80％-1vw'來代替您的保證金空間。 – Lae

@Lae謝謝！學到了新東西！由於我不能接受這個答案，我會繼續接受特里的基本上相同的說法，謝謝:) –

的div.chat-box-messages和div.chat-box-input量精確地100％的高度的總和。並且您的1vw垂直邊距將添加到該計算高度的頂部上，導致子元素溢出父項。爲了計算額外的保證金，您必須從最終高度減去總計2vw。一種方法是使用calc(80% - 1vw)和calc(20% - 1vw)的子元素的高度，即：

.chat-box-messages{ 
    height: calc(80% - 1vw); 
    background:yellow; 
} 

.chat-box-input{ 
    height: calc(20% - 1vw); 
    background:green; 
}

當然，你可以執行任何其他類型的高度排列，如使用calc(80% - 2vw)和堅持的20％高度另一個元素。

來源

2017-04-15 14:17:58 Terry

Yeap，謝謝！我從來不知道我必須爲我的保證金騰出空間。這完美的作品！ –

保證金似乎不能正常工作

回答

相關問題