Question

我正在为一个网站设计一个小设计，该网站的主要内容位于网站宽度的大约80％的正方形中，然后通过线路发出标题，页脚和两个侧边栏的信号。我的页眉，页脚，线条和内容都有效，所有（大多数）在调整大小时都会保持在正确的位置。但是，我不能为我的生活弄清楚如何让中心的方块继续填充屏幕中间的部分（没有重叠，或者有一个滚动条！）

我附上了我的广场的代码以及我正在尝试做的以及目前在下面发生的事情的截图。除了我的内部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/

Attached screenshots demonstrating the design when it works (on a 1920x1080 display, and how it looks on resize and on mobile.

Answer 1

在.innercontent div中，您正在使用代表“视口宽度”的vw测量值 - 基本上这意味着您的盒子的高度将相对于宽度用户正在查看网站的屏幕/视口。

您需要在vw以外的其他单位设置高度，宽度边距等，因为它会导致您看到的内容。我把你的小提琴分开来示范。

https://jsfiddle.net/550n5wgn/1/

Answer 2

如果可以，我会使用flexbox。

以下是演示，您可能需要进行调整以满足您的需求。

＆＃13;

* {
  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;
}

＆＃13;

<header></header>
<main></main>
<footer></footer>

＆＃13;

我们所做的最重要的事情是在flex-grow: 1上使用main，它解决了扩展内容区域以填充适当空间的主要问题。 flex-grow: 1告诉元素占用其父元素中的任何剩余空间。因此，无论从header和footer的高度留下什么空间，它都会存档。
我们使用min-height上的body作为起点，以便main不会以固定大小结束（如果我们使用{{1}就会发生这种情况而且，即使没有很多内容，布局也会最初填充视口。
你提到使用JS创建你的行，这对我来说似乎有些过分，可以用CSS完成。线条只是边界，唯一不明显的线条是水平线，它们延伸到height之外。我用一个伪元素做了这个，它在它的父元素之外伸展自己。伪元素的顶部和底部被拉到它的外面，其中包含的元素等于边界的厚度。伪元素的左侧和右侧被拉出足够宽，以便总是稍微延伸超过视口窗口（我使用相对单位，因此它将随视口一起增长）。我们在main上使用overflow: hidden;来阻止此元素最初创建的水平滚动条。

希望这对您有用，如果您有任何疑问，请告诉我，欢呼！

响应式的基于形状的布局？

2 个答案: