页面顶部容器尺寸超设定值致交互Bug问题求助

问题根源 #

1. 盒模型默认行为：默认box-sizing: content-box下，元素的width/height仅计算内容区域，加上padding后实际占据空间会超出设定值，导致元素溢出容器。
2. 脱离文档流的布局：logo使用position:absolute完全脱离父容器文档流，home/list使用float:left也脱离常规流，导致top_container无法正确包裹子元素，视觉上出现尺寸“超出”，同时hover交互区域与视觉位置不匹配。

具体修复步骤 #

1. 全局设置盒模型为border-box

让所有元素的宽高包含padding和border，避免尺寸溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 修复top_container的子元素布局

• 移除logo的position:absolute，让它回到父容器的文档流中，调整padding避免溢出：

.logo {
  width: 164px;
  height: auto;
  font-size: 21pt;
  font-weight: 700;
  color: white;
  padding: 25px 0 0 100px;
  filter: blur(0.01px);
  letter-spacing: 0.05em;
  float: left;
  cursor: pointer;
  background-color: aqua;
}

• 给top_container添加清除浮动的伪元素，确保它能正确包裹浮动的子元素：

.top_container::after {
  content: "";
  display: table;
  clear: both;
}

3. 优化top_container的高度设置

去掉固定的height:10%，改用min-height保证最小高度，让容器自适应子元素高度：

.top_container {
  width: 100%;
  min-height: 60px;
  text-align: center;
  background-color: white;
}

修复后的完整代码

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #192026;
  font-family: "poppins", sans-serif;
  font-size: 18pt;
  color: white;
  line-height: 36px;
}

.main_container {
  width: auto;
  padding-left: 140px;
  padding-right: 150px;
  padding-top: 10px;
}

.top_container {
  width: 100%;
  min-height: 60px;
  text-align: center;
  background-color: white;
}

.top_container::after {
  content: "";
  display: table;
  clear: both;
}

.logo {
  width: 164px;
  height: auto;
  font-size: 21pt;
  font-weight: 700;
  color: white;
  padding: 25px 0 0 100px;
  filter: blur(0.01px);
  letter-spacing: 0.05em;
  float: left;
  cursor: pointer;
  background-color: aqua;
}

.home {
  width: 54px;
  height: auto;
  font-size: 12pt;
  font-weight: 400;
  padding: 30px 0 0 350px;
  color: #6b7280;
  letter-spacing: 1px;
  float: left;
  cursor: pointer;
  background-color: green;
}

.list {
  width: 96px;
  height: auto;
  font-size: 12pt;
  font-weight: 400;
  padding: 30px 0 0 50px;
  color: #6b7280;
  letter-spacing: 1px;
  float: left;
  cursor: pointer;
  background-color: pink;
}

.list:hover,
.home:hover {
  color: #f3f4f6;
  transition: all .3s ease;
}

HTML

<a name="main"></a>
<div class="top_container">
  <div class="logo" onclick="location.href='https://google.com/'">Google</div>
  <div class="home">Home</div>
  <div class="list">List</div>
</div>
<div class="main_container"></div>

效果说明 #

修复后，所有元素的实际尺寸与设定值一致，top_container能正确包裹子元素，hover交互区域与视觉元素完全匹配，不会再出现溢出和交互bug。

内容的提问来源于stack exchange，提问作者janp0l_