Вопрос:

Сделать CSS верстку для адаптивной сетки с 3 колонками DIV

html css

46 просмотра

2 ответа

371 Репутация автора

Мне нужна адаптивная сетка для макета страницы с 3 столбцами. Из всех предложений, которые я нашел, ни одно не соответствует всем требованиям. Может быть, лучше начать без CSS-примера и начать с чистого начала.

введите описание изображения здесь

Требования:

  1. Должен быть совместим с https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
  2. Панель NAV прикреплена к верхней части страницы
  3. SIDE столбцы фиксированы в пикселях
  4. SIDE столбцы расширяются, чтобы заполнить доступное пространство для нижнего колонтитула
  5. Нижний колонтитул фиксируется внизу страницы
  6. Панель ТЕКСТ расширяется до ширины заливки, то есть: не установлена ​​на ширину пикселя
  7. Должен быть отзывчивым для мобильных телефонов

Два изображения выше показывают, что только широковая панель должна расширяться, когда экран становится шире.

У меня есть CSS для DIV, показанного выше, но мне не удалось увеличить боковые столбцы до 100% доступного пространства независимо от того, что я пробовал.

.header {
    //
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}
.row.content {
    height: 100%;    
}  
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    display: table-cell;    
}
footer {
    background-color: #555;
    color: white;
    padding: 15px;
}
@media screen and (max-width: 767px) {
    .row.content {
        height: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    } 
    .sidenav {
        height: auto;
        padding: 15px;
        display: flex;      
    }
}

<header>
  <p>Header Text</p>
</header>

<div class="container-fluid text-center">    
  <div class="row content">
  <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

Нет! Это не дубликат другого вопроса, потому что ни один другой вопрос не охватывает все эти требования. И их ответы не решают все требования здесь.

Автор: WilliamK Источник Размещён: 11.08.2019 04:44

Ответы (2)


0 плюса

138 Репутация автора

Вот ручка, где я думаю, что я отвечаю всем требованиям.

Это классическая сетка с телом, представляющим собой контейнер с min-height: 100vh;набором на нем. Для каждой высоты установлено значение auto, за исключением основного содержимого, которое равно 1fr ( одна доля доступного пространства ). И я сделал заголовок липким, который можно отменить, удалив position: sticky; top: 0;в css.

body.myContainer {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr repeat(3, auto);
  grid-template-columns: 100px 1fr 100px;
}

Один «трюк» я использовал это установив mainдля display: contents;девать то , что внутри в сетке, хотя его на самом деле не нужно здесь.
Я добавил загрузочную таблицу стилей, но она, похоже, не мешает.

Я также добавил 2 дополнительных ряда высоты autoи использовал их, чтобы переместить в сторону, если экран меньше max-width: 767px. Они рухнут, если не использовать

Вот вторая версия с липким заголовком и нижним колонтитулом.
Я использовал position: sticky; top: 0;в нижнем колонтитуле и bottom: 0в заголовке.

Примечание: при использовании stickyважно добавить position: -webkit-sticky;поддержку сафари.

Вот пример, где я использую первый макет с вашим кодом.
Boostrap установит некоторые поля, отступы, высоту и т. Д., Поэтому вам придется перезаписать их, чтобы он работал на вас. Например, я поместил класс myHeaderв navbar-wrapper, удалил navbar-fixed-topв navи в CSS:

div.myHeader > .container,
div.myHeader > .container .navbar
{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

Я просто использовал инспектора, чтобы выяснить, где применить эти ...

Автор: Pierre-Yves Размещён: 11.08.2019 07:36

0 плюса

1344 Репутация автора

Вы можете использовать flexbox . Поскольку, как уже упоминалось, вам нужно использовать Bootstrap 3.4 (вместо Bootstrap 4.xx с поддержкой flexbox), вам придется написать собственный CSS:

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}

.navbar {
  margin-bottom: 0;
}

.main {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.site-footer {
  padding: 15px;
  background: #222;
  margin-top: auto;
}

.site-footer p {
  margin: 0;
  color: #fff;
  font-size: 12px;
}

@media (min-width: 768px) {

  .main>.row {
    display: flex;
    margin-top: 0;
  }
  
  .sidebar {
    background: #efefef;
  }
  
}

@media (min-width: 992px) {
  
  .sidebar {
    max-width: 400px;
    min-width: 300px;
  }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="site-wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="main container-fluid">
    <div class="row">
      <div class="sidebar sidebar-left col-xs-12 col-sm-4 col-md-3">
        <ul class="list-group">
          <li class="list-group-item"><a href="#">First item</a></li>
          <li class="list-group-item"><a href="#">Second item</a></li>
          <li class="list-group-item"><a href="#">Third item</a></li>
        </ul>
      </div>
      <div class="content col-xs-12">
        <h2 class="mt-0">Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla optio, repudiandae laborum dicta molestias adipisci tempore aspernatur magni fugit corporis aliquid reiciendis, suscipit aut, esse, hic possimus explicabo dolorem!</p>
        <p>Quasi temporibus error, amet consequuntur reprehenderit veniam? Molestiae quos praesentium facilis at repellat iusto maiores porro est, reiciendis, repellendus nam dolores necessitatibus?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nam expedita sint error eos voluptas explicabo, sequi quidem eum, velit vitae autem dolorum vero nulla doloremque beatae enim veritatis ipsum.</p>
      </div>
      <div class="sidebar sidebar-right col-xs-12 col-sm-4 col-md-3">
        <ul class="list-group">
          <li class="list-group-item"><a href="#">First item</a></li>
          <li class="list-group-item"><a href="#">Second item</a></li>
          <li class="list-group-item"><a href="#">Third item</a></li>
        </ul>
      </div>
    </div>
  </div>

  <footer class="site-footer">
    <p class="text-center">&copy; 2019 @My Company</p>
  </footer>
</div>

Автор: Razvan Zamfir Размещён: 11.08.2019 09:06
Вопросы из категории :
32x32