响应式网站700px移动端视图下标题间边框有间隙不触边如何解决

问题原因 #

你在移动端媒体查询里给main设置了90%的宽度，底部边框仅会在main元素自身的宽度范围内渲染，元素左右的留白区域不会显示边框，所以会出现边框无法触达页面边缘的间隙。

解决方法 #

这里提供两种常用的实现方案：

方案1：将边框挂载到全宽父容器（推荐，不需要修改原有内容排版） #

你可以给main和aside套一个宽度为100%的外层父容器，把底部边框设置在这个全宽父容器上，内部的main、aside保持90%宽度居中即可，对应修改媒体查询代码如下：

@media only screen and (max-width: 700px) {
    /* 假设你新增的外层父容器类名为content-wrap */
    .content-wrap {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }
    main{
        float: none;
        border-right: none;
        width: 90%;
        border-bottom: none; /* 移除原有main上的底部边框 */
        margin: 0 auto; /* 保持内容水平居中 */
    }
    aside{
        float: none;
        width: 90%;
        margin: 0 auto; /* 保持内容水平居中 */
    }
    .wrapper{
        width: 100%; /* 最外层容器设为全宽，保证子容器可以撑满页面 */
    }
}

方案2：用负边距拉伸边框（无需修改HTML结构） #

如果不想调整HTML结构，可以通过负边距让main的边框区域拉伸到父容器边缘，同时给内容增加对应内边距保证原有排版不变：

@media only screen and (max-width: 700px) {
    main{
        float: none;
        border-right: none;
        width: 90%;
        border-bottom: 1px solid #ccc;
        margin: 0 -5%; /* 左右各拉伸5%，刚好占满父容器宽度 */
        padding: 0 5%; /* 内容区域缩进5%，和原有内容位置一致 */
    }
    aside{
        float: none;
        width: 90%;
    }
    .wrapper{
        width: 90%;
    }
}

注意如果main的父级容器设置了overflow: hidden，需要移除该属性，否则负边距拉伸的部分会被裁剪。

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