段落排版异常及与固定页脚重叠问题求助

问题1：text-align:justify不生效，段落靠左且无端换行 #

原因分析 #

• body设置了width:100vh（视口高度单位），错误限制了页面宽度，无法占满屏幕；同时display:inline-block让body宽度由内容决定，进一步压缩了段落可用宽度。
• 全局p标签的text-align:middle是无效属性值，即便inline样式写了text-align:justify，容器宽度不足时两端对齐效果也无法触发。
• aboutus.html中每个段落单独嵌套container，导致段落宽度被分割，无法形成连续宽文本块。

修复代码 #

1. 修正body的CSS：

body{
    background-image: linear-gradient(to bottom, #000000 0%, #7f8c8d 80%);
    background-repeat: no-repeat;
    min-height:100vh; /* 改用min-height，避免内容过长时背景截断 */
    width:100%; /* 改为100%占满屏幕宽度 */
    /* 移除display: inline-block; */
    background-size: cover;
 }

2. 调整aboutus.html结构，将循环放在单个container内：

{% extends 'customertemplates/main.html' %}
{% load static %}
{% block content %}
<div class="container">    
    {% for x in writeup %}
    <p style="color:white; text-align:justify;">{{x}}</p>
    {% endfor %}
</div>
{% endblock content %}

问题2：段落与footer重叠 #

原因分析 #

footer使用position:fixed固定定位，会脱离文档流，主体内容不会自动为其预留底部空间，导致内容被覆盖。

修复代码 #

给主体内容容器添加底部外边距，值大于等于footer高度：
修改main.html中的container：

<div class="container" style="margin-bottom: 60px;">
    <br>
    {% block content %}
    {% endblock content %}
</div>

或者在CSS中统一设置：

.container {
    margin-bottom: 60px; /* 可根据footer实际高度调整数值 */
}

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