0
我正在研究一個網站的小設計，網站的主要內容位於網站寬度的大約80％的正方形內，然後通過線路發送頁眉，頁腳和兩個側欄。我有標題，頁腳，行和內容全部正常工作，並且它們都（大部分）在調整大小時保留在正確的位置。然而，我不能在我的生活中弄清楚如何讓中心的方塊繼續填充屏幕中間的部分（沒有重疊，或者沒有滾動條！）響應式的基於形狀的佈局？
I'我附上了我的廣場的代碼和我正在嘗試做的事情以及下面發生的事情的截圖。除了我的innercontent div之外，在側面沒有div，以及上下的頁眉和頁腳div。
*更新：按要求添加代碼。我相信這就是我在屏幕截圖中提供的示例中使用的所有內容，而不是通過某些JS生成的行。我已經包含在這裏太重要的CSS，所以讓我與它的所有鏈接到我的JS小提琴：
/* ===================
Inital Styles
=================== */
html {
color: #fff;
font-size: 1em;
background: #3f51b5;
line-height: 1.4;
animation: fade 5s
}
::-moz-selection {
background: #6534ff;
text-shadow: none;
}
::selection {
background: #3f51b5;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h1,
h2,
h3,
h4 {
color: #fff;
font-family: 'Montserrat', sans-serif;
line-height: normal;
}
h1 {
font-size: 25px;
letter-spacing: 3.1;
}
h2 {
font-size: 14px;
font-weight: 500;
text-align: justify;
}
h3 {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
h4 {
font-size: 19px;
}
.inline {
display: inline;
}
.clear {
clear: both;
display: block;
content: "";
}
.center {
margin: auto;
width: 50%;
padding: 10px;
}
.header-container {
height: 145px;
position: relative;
}
.header-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: white;
text-align: center;
font-size: 40px;
font-family: 'Space Mono', monospace;
font-weight: 400;
line-height: 0px;
margin-top: 35px;
}
.subTitle {
color: white;
text-align: center;
font-size: 14px;
font-family: 'Space Mono', monospace;
font-weight: 400;
font-style: italic;
}
.innercontent {
position: relative;
height: 3vw;
width: 80%;
margin: auto;
padding-top: 32.5vw;
margin-top: -28px;
margin-left: 10.0%;
}
.green {
background: #42ab9e;
}
/* ===================
Name Collection
=================== */
#nameCollection {
text-align: center;
}
#nameText {
margin-top: -28%;
margin-left: 15%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.nameSkipButton {
margin-top: 25px;
background-size: 210% 100%;
background-image: linear-gradient(to right, #963019 50%, #16174f 50%);
-webkit-transition: background-position 0.3s;
-moz-transition: background-position 0.3s;
transition: background-position 0.3s;
border: none;
font-family: 'Space Mono', monospace;
color: #fff;
padding: 10px;
font-size: 12px;
}
.nameSkipButton:hover {
background-position: 99%, 0;
}<body>
<div class="delay">
<div class="fade-in delay">
<div class="header-container">
<header class="header-center">
<h1 class="title" onclick="location.reload();" style="cursor: pointer;">COMPUTERIFY.IO</h1>
<p class="subTitle" onclick="location.reload();" style="cursor: pointer;">Alpha is just a fancy word for unfinished.</p>
<p class="subTitle">
</h1>
</header>
</div>
<div class="main-container">
<div id="content" class="innercontent green">
<div id="nameCollection">
<div id="nameText">
<h3>Hello. I'm the PC Generator, or PCG for short. Before we get started, can I just ask...</h3>
<h1>What's your first name?</h1>
<div>
<input type="button" style="display:none" id="btnSearch" value="Search" onclick="getUserName()" />
<span class="input input--nameCollection">
<input class="input__field input__field--nameCollection" maxlength="19" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" type="text" id="input-25" />
<label class="input__label input__label--nameCollection" for="input-25">
<span class="input__label-content input__label-content--nameCollection">First Name</span>
</label>
</span>
</div>
<input class="nameSkipButton" id="skipName" type="button" value="I don't value my name, pick one for me" onclick="confirmSkip();" />
</div>
</div>
</div>
</div>
</div>https://jsfiddle.net/nxyg4a9x/2/
歡迎來到StackOverflow，你的問題應該包含[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）。 如果您希望您的網站具有響應能力，則使用絕對定位進行頁面佈局的FWIW是一個糟糕的選擇。當視口尺寸發生變化時，元素無法相互正確反應。 – hungerstar
道歉，如果你願意，我可以做一個jsfiddle嗎？你會推薦我用什麼來定位我的div，讓它們更具響應性？ –
如果可以，創建一個Stack Snippet。建議將遵循。 – hungerstar