javascript - 在水平调整窗口大小时向上移动

Question

我有三个 div，每个都有一个 <p>元素嵌套在里面。

`

<div id="mainHeader">
<img id="mainThumbnail" src=    "../Pictures/myWebsite/mainThumnail-cropped.png" alt="D&D setup">
    <div id="mainContent">
    <h2>This is the title of an article</h2>
    <p>this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
 </div>

 <div id="secondContainer">
 <img src="../Pictures/Gamerati/00-Freud.jpg" alt="Freud everyone!">
    <div id="secondArticle">
        <p>
        <span style="font-weight:bold;">This is another article.</span>
        this is the content of the article. L
        orem ipsum dolor sit amet, consectetur adipiscing elit, 
        </p>
    </div>
 </div>

 <div id="thirdArticle">
<p>
    <span style="font-weight:bold;">This is yet another article</span>

this is the content of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</p>

`

(抱歉，如果这在风格上不好)

我看到的是当垂直挤压窗口时段落将在屏幕上向上移动 <p>元素必须在每一行上放置更少的单词以适应设置的边距。所以现在段落在垂直方向上更长了。有没有办法让段落“向下推”这个额外长度的页面而不是向上增长？

这是 CSS:

#frontPage{
    position:relative;
    margin:auto;
    max-width:800px;
    height:800px;   
}

#frontPage p{
    background-color:#7C7C7C;   
}  

#frontPage h4{
     background-color:#7C7C7C;  
 }

 #mainContent{
    position:absolute;
    width:50%;
    text-align: center; 
    border-right: medium;
    border-right-style:solid;
    border-right-color:#000000;
    margin-top:15%;
 }


#mainContent p {
    margin-left:12%;
    margin-right:12%;
    background-color:#7C7C7C;   
}

#secondArticle{ 
    text-align:center;
    width:20%;
    float:right;
    margin-top:27%;
 }


#thirdArticle{
    text-align:center;
    width:20%;
    float:right;
    clear:both; 
 }

#secondContainer {
    background-color:#7C7C7C;   
}

#secondContainer img{
    width:15%;
    margin-top:40%;
    float:left;
}

我考虑过制作一个 onWindowResize 监听器，但任何类型的偏移量都完全取决于跟踪和错误。

Answer 1

#frontPage{
    position:absolute;
    margin:auto;
    max-width:800px;
    height:800px;   
}

position:absolute; 并使用 vh 代替 %

#secondArticle{ 
    text-align:center;
    width:20%;
    float:right;
    margin-top:27vh;
 }