Css Сетка Nested Divs - Нижний ряд вложенных Div не заполнит Larger Div - PullRequest
Новая
       17

Css Сетка Nested Divs - Нижний ряд вложенных Div не заполнит Larger Div

1 голос
/ 09 января 2020

Я довольно новичок в веб-дизайне, но пытался создать сайт исследований по бейсболу, который наконец-то привел меня к программированию. Я поместил сетку CSS в некоторый успех, но у меня была постоянная ошибка с моим вложенным элементом или основным содержимым на моей "Домашней" странице. Он продолжает появляться или нависать над другими задачами на сайте и нуждается в исправлении. Эти доски великолепны, и я буду признателен за любую помощь. Спасибо. Вот проблема и код:

У меня есть адаптивный макет, который использует медиа-запросы для 3 разных размеров экрана> 700 пикселей, <500 пикселей и <700 пикселей. В моем главном центральном столбце есть 2x2 «контентный» div, в котором есть 4 области сетки. <strong>Проблема в том, что нижний ряд вложенных элементов div не распространяется на нижнюю часть родительского элемента div , что раздражает, когда элементы div достигают определенной высоты.

На прилагаемом рисунке вы можете видеть границу большего "содержимого" div в черном цвете с вложенными полупрозрачными белыми вложенными div, останавливающимися задолго до черной границы. Margin-bottom был установлен на 0 в любом классе css, о котором я могу думать. Код также прикреплен, но я также новичок в интенсивной публикации кода здесь, так что не знаю, как это сделать лучше :) Любить кодирование до сих пор. Спасибо всем! 

* {
  box-sizing: border-box;
}

.wrapper {
  background-image: url(oceanfull.PNG);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  max-width: 100%;
  margin: 0;
  font: 1.2em Helvetica, arial, sans-serif;
  height: 100%;
}

.wrapper>* {
  border: 2px solid black;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 5px;
  padding: 0px;
}

.wrapper h1 {
  font-size: 30px;
  text-align: center;
  padding: 0px;
}

a:hover {
  text-decoration: underline;
  background-color: rgb(28, 224, 238);
}

.main-head {
  grid-area: header;
  background-image: url(ray.png);
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  height: 15vh;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 0px;
  padding: 0px;
  grid-template-areas: "leftop centertop righttop";
}

.main-head h1 {
  margin-top: 50px;
  margin-bottom: 0px;
  background-color: blue;
  border: solid black;
}

.leftop {
  grid-area: leftop;
  border: solid green;
}

.lefttop img {
  height: 40%;
  width: 100%;
  position: relative;
  top: 60%;
  right: 10%;
}

.centertop {
  grid-area: centertop;
  display: flex;
  flex-direction: row;
  margin: auto;
  position: relative;
  top: -50%;
}

.righttop {
  grid-area: righttop;
}

.righttop img {
  height: 60%;
  width: 100%;
  position: relative;
  top: 40%;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
  height: 100%;
  padding: 0px;
  grid-template-areas: "one one" "three four";
  padding-bottom: 0px;
  background-color: rgba(255, 255, 255, 0.0);
  border: solid black;
}

.wrapper article div {
  height: 100%;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

.one {
  grid-area: one;
  word-wrap: break-word;
  padding-left: 8px;
  padding-top: 8px;
  height: 100%;
}

.one img {
  border-radius: 12px;
  float: right;
  clear: right;
}

.three {
  grid-area: three;
  height: 100%;
}

.three h4 {
  margin-bottom: 1vh;
  margin-top: 1vh;
}

.three ul {
  list-style-type: auto;
  padding-left: 20px;
  padding-right: 5px;
}

.three ul li {
  padding-bottom: 15px;
}

.four {
  grid-area: four;
  height: 100%;
}

.main-nav {
  grid-area: nav;
}

.main-nav ul {
  font-size: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li {
  padding-bottom: 0vh;
}

nav ul {
  margin: 0;
  padding: 0;
}

.side {
  grid-area: sidebar;
  font-size: 2.5vh;
}

.side p {
  margin-bottom: 0px;
  padding-left: 4px;
}

.ad {
  grid-area: ad;
  padding: 0px;
}

.main-footer {
  grid-area: footer;
  padding: 0px;
}

.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: "header  header" "nav     nav" "sidebar content" "ad      content" "footer  footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: "header header  header" "nav    content sidebar" "nav    content ad" "footer footer  footer";
  }
  nav ul {
    flex-direction: column;
  }
  .main-nav ul li {
    padding-bottom: 5vh;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BBsite</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <header class="main-head">
      <div class="lefttop">

      </div>

      <div class="centertop">
        <h1>The Site</h1>
      </div>

      <div class="righttop">

      </div>

    </header>

    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="pages/lineup.html">Lineup</a></li>
        <li><a href="pages/articles.html">Articles</a></li>
      </ul>
    </nav>
    <article class="content">
    
      <div class="one">
        <img src="morsecrazy.jpg" alt="morsecrazy">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, nemo minus ad nisi debitis a in aliquam reiciendis iure libero vero totam laboriosam quidem, animi esse, itaque doloribus dolore culpa doloremque. Maxime soluta laboriosam commodi,
          itaque facilis qui doloremque aliquid non quisquam placeat eveniet ipsum fugiat voluptates culpa ad dolor?</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>


      </div>
      <div class="three">
        <h4>The Old Recent Research/Articles/Charts</h4>
        <ul>
          <li>Data Thing</li>
          <li>You Won't Believe Thing</li>
          <li>Article Thing</li>
          <li>Thing Another</li>
          <li>Thing</li>
        </ul>
      </div>
      <div class="four">4</div>
    </article>
    <aside class="side">
      <h2>Lineup</h2>
      <p>C - Guy Catcher</p>
      <p>1B - First Basemanman</p>
      <p>2B - Double Base</p>
      <p>3B - 3B</p>
      <p>SS - The Shortstop</p>
      <p>LF - Left the what?</p>
      <p>CF - Rover</p>
      <p>RF - Bobby Abreu</p>
      <p>DH - DH</p>
    </aside>
    <div class="ad">
      <p>ad</p>

    </div>
    <footer class="main-footer">The footer</footer>

  </div>

HTML: 

<article class="content">
            <div class="one">
              <img src="morsecrazy.jpg" alt="morsecrazy">
              <p>Loremssss<p>

   </div>
        <div class="three">
            <h4>The Old Recent Research/Articles/Charts</h4>
            <ul>
                <li>Data Thing</li>
                <li>You Won't Believe Thing</li>
                <li>Article Thing</li>
                <li>Thing Another</li>
                <li>Thing</li>
            </ul>
        </div>
        <div class="four">4</div>
    </article>

CSS: 

.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
padding: 0px;
grid-template-areas: 
    "one one"
    "three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
border: solid black;}

.one {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.one img {
  border-radius: 12px;
  float: right;
  clear: right;
  }
.three {
    grid-area: three;
  }
.three h4 {
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
.three ul {
   list-style-type: auto;
    padding-left: 20px;
    padding-right: 5px;
  }
.three ul li {
  padding-bottom: 15px;
}
  .four {
    grid-area: four;
  }




.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      content"
      "footer  footer";}
  nav ul {
    display: flex;
    justify-content: space-between;}
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"}
   nav ul {
     flex-direction: column;
     }
   .main-nav ul li {
    padding-bottom: 5vh;}
}

Решения / Вещи Я пытался, что не сработало:

-Высота 100% в определенном классе проблема или не хватает где-то?

-список типа в .three ul?

-Мои медиазапросы имеют другое разделение строк / столбцов, чем написано в классе "content" CSS? ** (большой)

- другие слабые средства:)

** Само присутствие "областей сетки" для этого вложенного div может быть ненужным или проблемой? Первоначально сетка 2x2, которую я хотел там, не заполняла верхний левый элемент div, а просто сдвигала все на единицу, поэтому я сделал области сетки внутри областей сетки ---- но есть разные макеты для медиазапроса / адаптивного макета?

Короче говоря, почему вложенные элементы div "три" и "четыре" не заполняют весь элемент div? Его поле на самом деле действительно хочет быть 0! Спасибо. Пожалуйста, дайте мне знать, если я смогу чем-нибудь помочь.

ИЗОБРАЖЕНИЕ !!!! вложенные div "three" и "four" не заполняют родительский div (граница большего div в черном)

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Кажется, проблема в HTML кода. Теперь я опубликовал «Фрагмент кода выполнения», который должен отличаться от того, что я вставил в него.

Проблемы с отступами или форматированием в HTML, по-видимому, были проблемой (?). Я пропустил свой код через JS Fiddle, чтобы опубликовать здесь, и опция "Scrub", я считаю, незначительно изменила форматирование моего HTML, и я думаю, сработало! Извиняюсь за сжатые CSS code} s, но я не хотел оставлять очень высокий пост. Это была не проблема, хотя. Отступ элементов в HTML, я думаю, привел к тому, что вложенный div не полностью заполнил свое гнездо?

Спасибо всем

0 голосов
/ 09 января 2020

Возможно, вы пропустили установку высоты свойства: 100% в div с классом "three" и классом "four".

...