0
私はサイトの幅のおよそ80％の正方形にあるメインコンテンツと、ヘッダー、フッター、および2つのサイドバーがラインを介して送信されるようなサイトのための少しの設計に取り組んでいます。ヘッダー、フッター、ライン、コンテンツはすべて動作しており、サイズ変更されたときにはすべて（ほとんど）正しい場所にとどまります。しかし、私は私の人生のために中央の四角形を画面の中央にセクションを塗りつぶし続ける（重ならないで、またはスクロールバーを持つ）方法を工夫することはできません。レスポンシブな形状ベースのレイアウトですか？
私は、私の正方形のコードと、私がやろうとしていること、そして現在以下に起こっていることのスクリーンショットが添付されています。私のinnercontent div以外に、サイドにはdivがなく、上下にヘッダーとフッターのdivがあります。
*アップデート：要求通りにコードを追加しました。私はこれが、いくつかのJSを通して生成されるライン以外のスクリーンショットで提供した例で使用されているものだと思います。私はので、私はそれをすべてと私のJSフィドルにリンクできるようにするために、ここでも重要なCSSを含めました：あなたの.innercontentで
/* ===================
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を配置して、より反応性にするために使用することをお勧めしたいと思いますか？ –
できる場合は、スニペットを作成します。推奨事項が続きます。 – hungerstar