Preliminary idea
If it is permissible to duplicate content in two blocks (for example, if the page code is compiled by the CMS engine), then we can create a system of blocks.
The first instance of content will be hidden using the visibility property, but will set the 100% reference height we need. The second instance of the block will be visible and positioned absolutely relative to its invisible counterpart.
The content has risen to the desired percentage of height, and this percentage can be changed arbitrarily. The top property in percentages means the percentages of the height of the containing block.
But we got a gap between the raised block and the footer of the page:
#top {
background: lightGreen;
}
#bottom {
background: lightBlue;
}
.content {
outline: 1px solid red;
}
.position-relative {
position: relative;
}
.pull-up {
position: absolute;
top: -30%;
left: 0;
right: 0;
}
.visibility-hidden {
visibility: hidden;
}
<div id="top">Top</div>
<div class="position-relative">
<div class="content visibility-hidden">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.</div>
<div class="content pull-up">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.</div>
</div>
<div id="bottom">Bottom</div>
Final Solution Proposal
To get rid of the gap, we need to pull up all subsequent page content as well. To do this, we put it, along with the content duplicate, in the common intermediate wrapper pull-up.
It is this wrapper that we position absolutely and raise it 30% of the parent's height. Its parent is the position-relative block with the CSS property of the same name. And the parent's height is set by the first invisible instance of our content.
To make sure that the absolutely positioned box is fully visible in the browser, I enlarged the bottom box.
#top {
background: lightGreen;
}
#bottom {
background: lightBlue;
}
.content {
outline: 1px solid red;
}
.position-relative {
position: relative;
}
.pull-up {
position: absolute;
top: -30%;
left: 0;
right: 0;
}
.visibility-hidden {
visibility: hidden;
}
<div id="top">Top</div>
<div class="position-relative">
<div class="content visibility-hidden">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.</div>
<div class="pull-up">
<div class="content">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.</div>
<div id="bottom">
<p>Bottom 1</p>
<p>Bottom 2</p>
<p>Bottom 3</p>
<p>Bottom 4</p>
<p>Bottom 5</p>
<p>Bottom 6</p>
<p>Bottom 7</p>
<p>Bottom 8</p>
<p>Bottom 9</p>
</div>
</div>
</div>
