我正在为一个网站做一些小设计，该网站由主要内容组成，这些内容位于网站宽度大约 80% 的正方形中，然后是页眉、页脚和两个侧边栏，它们通过线条表示。我的页眉、页脚、线条和内容都可以正常工作，并且在调整大小时它们(大部分)都保持在正确的位置。但是，我终生无法弄清楚如何让中心的正方形继续填充屏幕中间的部分(没有重叠，也没有滚动条!)
我附上了我的 Square 的代码和一些我正在尝试做的事情以及下面发生的事情的屏幕截图。除了我的内部内容 div 之外，侧面没有任何 div，上下没有页眉和页脚 div。
*更新:根据要求添加了代码。我相信这就是我在屏幕截图中提供的示例中使用的所有内容，除了通过某些 JS 生成的线条。我在这里也包括了重要的 css，所以允许我链接到我的 JS Fiddle:
/* ===================
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>最佳答案
我会使用 flexbox如果可以的话。
以下是一个演示，您可能需要进行调整以满足您的需要。
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
overflow: hidden;
background-color: #3f51b5;
}
header,
main,
footer {
margin: 0 10%; // Indirect way of making element width: 80%;
border-left: 2px solid lightgray;
border-right: 2px solid lightgray;
}
header,
footer {
flex-basis: 100px;
}
main {
position: relative;
flex-grow: 1;
background-color: #42ab9e;
}
main:before {
content: '';
z-index: -1;
position: absolute;
top: -2px;
right: -100%;
bottom: -2px;
left: -100%;
display: block;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
}<header></header>
<main></main>
<footer></footer>- 我们所做的最重要的事情是在
main上使用flex-grow:1，它解决了您主要关心的拉伸(stretch)内容区域以填充适当空间的问题。flex-grow: 1告诉元素占用其父元素内的所有剩余空间。因此，无论header和footer的高度剩余多少空间，它都会归档。 - 我们在
body上使用min-height作为起点，这样main就不会以固定大小结束(这就是如果我们改用height就会发生这种情况)并且布局最初会填充视口(viewport)，即使内容不多也是如此。 - 你提到使用 JS 来创建你的线条，这对我来说似乎有点过分了，可以用 CSS 来完成。这些线只是边界，唯一不明显的线组是延伸到
main之外的水平线。我用一个伪元素来做到这一点，这个伪元素将自身延伸到它的父元素之外。伪元素的顶部和底部被拉到它的包含元素之外，等于边框的厚度。伪元素的左侧和右侧被拉出的宽度刚好足以始终超出视口(viewport)窗口一点(我使用了相对单位，因此它会随着视口(viewport)增长)。我们在body上使用了overflow: hidden;来防止此元素最初创建的水平滚动条。
希望这对你有用，如果你有任何问题，请告诉我，干杯!
关于html - 响应式基于形状的布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43545325/