CSS中內容下的空間

我有兩個DIV。一個是保存消息。另一個用於顯示消息內容。但我有一個問題。這兩個DIV都有這麼大的空間。我如何解決它？CSS中內容下的空間

#messages { 
 
    border: 1px solid rgb(43, 68, 233); 
 
    height: 770px; 
 
    width: 300px; 
 
} 
 
#chat-content { 
 
    height: 770px; 
 
    width: 1283px; 
 
    border: 1px solid rgb(43, 68, 233); 
 
    position: relative; 
 
    left: 300px; 
 
    bottom: 770px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel='stylesheet' type='text/css' href='style.css'> 
 
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script> 
 
    <script type='text/javascript' src='jquery-ui.js'></script> 
 
</head> 
 

 
<body> 
 
    <div id='messages'> 
 

 
    </div> 
 
    <div id='chat-content'> 
 

 
    </div> 
 
</body> 
 

 
</html>

來源

2016-09-27 BoeNoe

你的第二個div從窗口的底部定位770px：bottom: 770px。這是造成差距的原因。由於您正在處理已定義的固定寬度，因此您可以使用絕對定位與top和left。請記住，您的第二個div上的left需要適應邊框寬度（+ 2px），因爲您的第一個框實際上是302px寬，而不是300（帶邊框）。

#messages { 
 
    border: 1px solid rgb(43, 68, 233); 
 
    height: 770px; 
 
    width: 300px; 
 
    position:absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 

 
#chat-content { 
 
    height: 770px; 
 
    width: 1283px; 
 
    border: 1px solid rgb(43, 68, 233); 
 
    position:absolute; 
 
    left: 302px; 
 
    top: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel='stylesheet' type='text/css' href='style.css'> 
 
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script> 
 
    <script type='text/javascript' src='jquery-ui.js'></script> 
 
</head> 
 

 
<body> 
 
    <div id='messages'> 
 
    </div> 
 
    <div id='chat-content'> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-09-27 12:33:25

非常感謝你。這幫了我很多！ – BoeNoe

CSS中內容下的空間

回答

相關問題