时间戳

首页 > 解决方案 > 固定页眉需要留在顶部，固定页脚需要留在底部，剩余的空间量用内容填充主 div

html - 固定页眉需要留在顶部，固定页脚需要留在底部，剩余的空间量用内容填充主 div

问题描述

这是我的代码的 HTML 部分的样子。我正在使用引导程序来创建类似布局的网格。这是我要实现的目标的示例图像。

在此处输入图像描述

如您所见，NAV BAR 和 FOOTER 需要包含在左侧容器中，这样右侧的 SIDEBAR 也会显示出来，因此它们不会与侧边栏重叠。

    <div className="container-fluid">
      <div className="container-fluid">
        <div className="row mt-2 mb-2 mr-2 ml-2 main">
          <div className="col-md-8">
            <nav>
              <div className="row mt-2 mb-2 mr-2 ml-2 nav">
                <div className="col-md-12">
                  <div className="ui buttons">
                    <button className="ui button mb-1 mt-1">
                      <i className="plus icon"></i>
                      Add Card
                    </button>
                    <div className="or mb-1 mt-1"></div>
                    <button className="ui positive button mb-1 mt-1">
                      <i className="sort amount down icon"></i>
                      Sort All
                    </button>
                  </div>
                </div>
              </div>
            </nav>

              <div className="row mt-2 mb-2 mr-2 ml-2 body">
                <div className="col-md-12">
                  <div className="card mt-2 mb-2">
                    <div className="card-body">
                      <p className="card-text">{getRandomNumber(0, 101)}</p>
                    </div>
                  </div>
                </div>
              </div>

            <footer>
              <div className="row mb-4 mr-2 ml-2">
                <div className="col-md-12">
                  <h3 className="text-center text-muted">Footer</h3>
                </div>
              </div>
            </footer>
          </div>
          <div className="col-md-4">
            <ul>
              <h6>React Coding Challenge Formatted Instructions:</h6>
              <li className="list-item">
                Create a responsive React application using either JavaScript or
                TypeScript.
              </li>
              <li className="list-item">
                The main portion of the application will contain a list of cards
                with a randomly generated number between 0-100 within each card.
              </li>
              <li className="list-item">
                The right pane has a fixed-width that remains attached to the
                right side when the user resizes the window. Once the browser
                width is small, the pane will be hidden.
              </li>
              <li className="list-item">
                The top pane is a fixed-heigth toolbar that has a button to add
                additional cards as well as a button to sort all the cards in
                ascending numerical order based on the number within each card.
              </li>
              <li className="list-item">
                The bottom pane is a fixed-heigth footer that just contains the
                text "footer".
              </li>
              <li className="list-item">
                The center pane is the card container. It starts out with zero
                cards. The user will click the "Add Card" button in the top
                toolbar to add a card in the center container.
              </li>
              <li className="list-item">
                The center pane has a vertical scrollbar that will become
                visible once enough cards are displayed. The user can use the
                scrollbar to scroll through all the added cards.
              </li>
              <li className="list-item">
                The cards are added vertically into rows which will wrap as
                needed. The amount of visible cards per row is dependant on the
                width of the browser.
              </li>
              <li className="list-item">
                Each card has a set pixel size of 300 pixels in width and 250
                pixels in heigth.
              </li>
              <li className="list-item">
                Upon instantiation of a new card, a random number will be
                generated between 0 and 100 and then displayed in the center of
                each new card.
              </li>
              <li className="list-item">
                Each card has a button present in the top-right corner that the
                user may click to remove the card.
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

我需要将页脚定位到父 div 的底部。父 div 是包含所有其他嵌套 div 的主行。我已经查看了多个 stackoverflow 解决方案，包括相对的、绝对的 css 类。使用边距将底部设置为 0 px。我不知道还能去哪里。我需要工具栏始终保持在顶部，中心部分填充容器的其余部分，页脚保持在底部。Toolbar（页眉）和页脚的高度是固定的，中心部分的大小应该是剩余的空间量。它还有一个固定的侧边栏。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const App = () => {
  return (
    <div class="container-fluid">
      <div class="row mt-2 mb-2 mr-2 ml-2 main">
        <div class="col-md-8">
          <div class="row mt-2 mb-2 mr-2 ml-2">
            <div class="col-md-12">
              <div class="ui buttons">
                <button class="ui button mb-1 mt-1">
                  <i class="plus icon"></i>
                  Add Card
                </button>
                <div class="or mb-1 mt-1"></div>
                <button class="ui positive button mb-1 mt-1">
                  <i class="sort amount down icon"></i>
                  Sort All
                </button>
              </div>
            </div>
          </div>
          <div class="row mt-2 mb-2 mr-2 ml-2">
            <div class="col-md-12">
              <div class="card mt-2 mb-2">
                <h5 class="card-header">Card title</h5>
                <div class="card-body">
                  <p class="card-text">Card content</p>
                </div>
                <div class="card-footer">Card footer</div>
              </div>
            </div>
          </div>
          <div class="row mb-4 mr-2 ml-2 footer">
            <div class="col-md-12">
              <h3 class="text-center text-muted">
                Footer
              </h3>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <ul>
            <lh>React Coding Challenge Formatted Instructions:</lh>
            <li class="list-item">Create a responsive React application using either JavaScript or TypeScript.</li>
            <li class="list-item">The main portion of the application will contain a list of cards with a randomly generated number between 0-100 within each card.</li>
            <li class="list-item">The right pane has a fixed-width that remains attached to the right side when the user resizes the window.
            Once the browser width is small, the pane will be hidden.</li>
            <li class="list-item">The top pane is a fixed-heigth toolbar that has a button to add additional cards as well as a button to sort all the cards
            in ascending numerical order based on the number within each card.</li>
            <li class="list-item">The bottom pane is a fixed-heigth footer that just contains the text "footer".</li>
            <li class="list-item">The center pane is the card container. It starts out with zero cards. The user will click the "Add Card" button in the top toolbar
            to add a card in the center container.</li>
            <li class="list-item">The center pane has a vertical scrollbar that will become visible once enough cards are displayed. The user can use the scrollbar to
            scroll through all the added cards.</li>
            <li class="list-item">The cards are added vertically into rows which will wrap as needed. The amount of visible cards per row is dependant on the 
            width of the browser.</li>
            <li class="list-item">Each card has a set pixel size of 300 pixels in width and 250 pixels in heigth.</li>
            <li class="list-item">Upon instantiation of a new card, a random number will be generated between 0 and 100 and then displayed in the center of each
            new card.</li>
            <li class="list-item">Each card has a button present in the top-right corner that the user may click to remove the card.</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

标签： htmlcssreactjsbootstrap-4

解决方案

不同的页眉和页脚样式

此答案中有四个不同的代码片段，每个代码片段都展示了不同的页眉和页脚行为，如下所示：

  • 粘性页眉和粘性页脚
  • 粘性页眉和固定页脚
  • 固定页眉和粘性页脚
  • 固定页眉和固定页脚

您可以点击卡片将其删除，这样您就可以看到卡片较少时的行为。您还可以通过切换窗口宽度来可视化这一点。

粘性页眉和粘性页脚

const nav = document.querySelector("nav");
const footer = document.querySelector("footer");

const container = document.querySelector(".card-container");

for (let i = 0; i < 20; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = "Click Me!!";
    container.appendChild(card);
}

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
    card.addEventListener("click", () => {
        card.style.display = "none";
    });
});
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    color: whitesmoke;
    font-family: cursive;
}

header {
    position: fixed;
    top: 0;
    /*Expanding to take full width*/
    right: 0;
    left: 0;
}

footer {
    position: fixed;
    bottom: 0;
    /*Expanding to take full width*/
    right: 0;
    left: 0;
}

header,
footer {
    background: slateblue;
    padding: 1em;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    place-content: center;
    gap: 10px;
    padding: 5em 1em; /* Top Padding Is Required */
}

.card {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    background: coral;
    border-radius: 5px;
    cursor: pointer;
}
<header>Sticky Header & Sticky Footer</header>
<div class="card-container"></div>
<footer>Sticky Footer</footer>

粘性页眉和固定页脚

const nav = document.querySelector("nav");
const footer = document.querySelector("footer");

const container = document.querySelector(".card-container");

for (let i = 0; i < 20; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = "Click Me!!";
    container.appendChild(card);
}

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
    card.addEventListener("click", () => {
        card.style.display = "none";
    });
});
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    color: whitesmoke;
    font-family: cursive;
}

header {
    position: fixed;
    top: 0;
    /*Expanding to take full width*/
    right: 0;
    left: 0;
}

header,
footer {
    background: slateblue;
    padding: 1em;
}

.card-container {
    flex: 1; /* IMP */
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    gap: 10px;
    padding: 0 1em 2em;
    padding-top: 5em; /* IMP */
}

.card {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    background: coral;
    border-radius: 5px;
    cursor: pointer;
}
<header>Sticky Header & Fixed Footer</header>
<div class="card-container"></div>
<footer>Fixed Footer</footer>

固定页眉和粘性页脚

const nav = document.querySelector("nav");
const footer = document.querySelector("footer");

const container = document.querySelector(".card-container");

for (let i = 0; i < 20; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = "Click Me!!";
    container.appendChild(card);
}

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
    card.addEventListener("click", () => {
        card.style.display = "none";
    });
});
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    color: whitesmoke;
    font-family: cursive;
}

footer {
    position: fixed;
    bottom: 0;
    /*Expanding to take full width*/
    right: 0;
    left: 0;
}

header,
footer {
    background: slateblue;
    padding: 1em;
}

.card-container {
    flex: 1; /* IMP */
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    gap: 10px;
    padding: 1em 2em;
}

.card {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    background: coral;
    border-radius: 5px;
    cursor: pointer;
}
<header>Fixed Header & Sticky Footer</header>
<div class="card-container"></div>
<footer>Sticky Footer</footer>

固定页眉和固定页脚

const nav = document.querySelector("nav");
const footer = document.querySelector("footer");

const container = document.querySelector(".card-container");

for (let i = 0; i < 20; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = "Click Me!!";
    container.appendChild(card);
}

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
    card.addEventListener("click", () => {
        card.style.display = "none";
    });
});
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    color: whitesmoke;
    font-family: cursive;
}

header,
footer {
    background: slateblue;
    padding: 1em;
}

.card-container {
    flex: 1; /* IMP */
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    gap: 10px;
    padding: 1em 2em;
}

.card {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    background: coral;
    border-radius: 5px;
    cursor: pointer;
}
<header>Fixed Header & Fixed Footer</header>
<div class="card-container"></div>
<footer>Fixed Footer</footer>

最后下面的代码是更新问题的解决方案

const nav = document.querySelector("nav");
const footer = document.querySelector("footer");

const container = document.querySelector(".card-container");

for (let i = 0; i < 20; i++) {
    const card = document.createElement("div");
    card.className = "card";
    card.innerText = "Click Me!!";
    container.appendChild(card);
}

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
    card.addEventListener("click", () => {
        card.style.display = "none";
    });
});
body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header aside" "body aside" "footer aside";

    color: whitesmoke;
    font-family: cursive;
}

aside {
    grid-area: aside;
    background: midnightblue;
}

header {
    grid-area: header;
}

footer {
    grid-area: footer;
}

header,
footer {
    background: slateblue;
    padding: 1em;
}

.card-container {
    grid-area: body;
    
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    align-content: start;
    gap: 10px;
    padding: 1em 2em;
    overflow-y: scroll;
}

.card {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    background: coral;
    border-radius: 5px;
    cursor: pointer;
}
<body>
    <header>Header</header>
    <div class="card-container"></div>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</body>

推荐阅读