网页高度为预期的两倍，如何通过CSS或HTML强制设置页面固定尺寸？

核心问题排查 #

1. 类名大小写不匹配
   HTML中div的class属性为Divname（首字母大写），CSS选择器写为.divname（首字母小写），CSS类选择器区分大小写，导致你设置的宽高样式完全没有生效，这是布局异常的核心原因。
2. 定位属性冲突
   你给div设置position: relative的同时定义了top: 50%和bottom: 223px，相对定位下同时设置上下偏移量会触发布局计算异常，同时bottom: 223px;;多写了一个分号，属于语法冗余。
3. 默认边距溢出
   h3、h4、center标签都自带默认上下外边距，就算div样式生效，如果内部内容总高度超出div的固定高度，未做溢出处理的话，内容也会撑开页面整体高度。

固定网页尺寸的实现方案 #

1. 全局尺寸强制设置

如果需要固定整个网页的尺寸，给html和body添加如下样式即可：

html, body {
  width: 1000px; /* 自定义固定宽度 */
  height: 200px; /* 自定义固定高度 */
  margin: 0;
  padding: 0;
  overflow: hidden; /* 超出页面尺寸的内容直接隐藏，避免撑开高度 */
}

2. 修正div相关代码

首先统一类名大小写，比如将HTML中的class改为小写，同时替换废弃的<center>标签：

<div class="divname">
    <h3 style="text-align: center;">Text</h3>
    <h4 style="text-align: center;">Text</h4>
    <h4 style="text-align: center;">Text</h4>
    <h4 style="text-align: center;">Text</h4>
    <h4 style="text-align: center;">Text</h4>
</div>

然后修正CSS样式：

.divname {
  width: 1000px;
  height: 200px;
  border: 1px solid grey;
  background-color: whitesmoke;
  position: relative;
  right: 230px; /* 只保留需要的偏移属性，删掉冲突的top、bottom设置 */
  overflow: hidden; /* 内部内容超出div高度时隐藏，避免撑开布局 */
  box-sizing: border-box; /* 将border计算在宽高范围内，不会额外增加div尺寸 */
}

内容的提问来源于stack exchange，提问作者MONKEY-GOD