trevorscottt Ответов: 2

Как создать очень простой сайт с 2 колонками?

Я пытаюсь закодировать целевую страницу, которая не прокручивается и имеет только две колонки. Левый столбец составляет 40% и имеет текст, правый столбец, очевидно, 60% и имеет изображение, и оба столбца имеют высоту 100% и всегда подходят к размеру браузера до тех пор, пока мобильный или <600px широкий, я бы сложил их.

То, что я не могу понять, как это сделать, - это сделать так, чтобы два столбца были 100% высотой и реагировали на ширину/высоту браузера, а также удалить возможность прокрутки.

Прекрасным примером является thehustle.ко хотя у них, похоже, не две колонки, вы поняли идею.

Я не знаю, нахожусь ли я на правильном пути и ни в коем случае не являюсь экспертом в html/css. Надеюсь, что кто-то сможет мне помочь или указать на хорошее видео на YouTube.

Спасибо!

Что я уже пробовал:

Я попробовал <div class ="split left" и <div class ="split right" со следующим CSS ниже.

.splt {
	height: 100%;
	width: 40%;
	position: fixed;
	z-index: 1;
	top: 0;
	overflow-x: hidden;
	padding-top: 20px;
}

.left {
	left: 0;
	background-color: #fff
}

.right {
	right: 0;
	background-color: #000
}

2 Ответов

Рейтинг:
2

Bryian Tan

Вы также можете использовать bootstrap

Вот вам пример:

cp_full_height - JSFiddle[^]

полный код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <style>
        .fill {
            height: 100vh;
        }

        .leftBgColor, .rightBgColor {
            height: 100vh;
            background: red;
        }

        .rightBgColor {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container-full fill">
        <div class="row">
            <div class="col-sm-4 leftBgColor">
                40%
            </div>
            <div class="col-sm-8 rightBgColor">
                60%
            </div>
        </div>
    </div>
</body>
</html>

Richard Deeming

Вот только 4/12-это не 40% , а 33.3333333...% :)

Кроме того, AFAIK Bootstrap 4 использует Flexbox для реализации сетки, поэтому поддержка браузера такая же, как и при непосредственном использовании Flexbox.

Bryian Tan

Спасибо, что поделились :). хороший материал

Рейтинг:
12

Richard Deeming

До тех пор, пока вы можете отказаться от поддержки IE10 и более ранних версий, вы можете использовать Flexbox, чтобы сделать это очень легко:

@media (min-width: 600px) {
  html,
  body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body {
    display: flex;
  }
  .left,
  .right {
    padding: 10px;
  }
  .left {
    width: 40vw;
    background-color: #eff;
  }
  .right {
    flex-grow: 1;
    background-color: #ffe;
  }
}

Демонстрация[^]
Основные понятия flexbox - CSS | MDN[^]
Полное руководство по Flexbox | CSS-Tricks[^]
Могу ли я использовать... На основе адаптируемых блоков[^]

trevorscottt

Ух ты, спасибо! Похоже, он сделал именно то, что я искал. До тех пор, пока колонны укладываются друг на друга... На мобильном устройстве могу ли я выбрать для столбца справа, чтобы он складывался первым, и немного изменить цвета фона? Когда они свернуты друг на друга, я бы, по сути, хотел 3 ряда с изменяющимся цветом.

например (серый фон с изображением сверху, белый фон с некоторым текстом, серый фон с еще одним текстом)

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

Richard Deeming

Если вы просто хотите поменять порядок столбцов на меньших экранах, вы можете поменять порядок столбцов на меньших экранах. <div>С и использовать flex-direction:row-reverse; - Демонстрация[^]

Изменение цвета фона также легко: укажите цвета "маленького экрана" в правиле перед началом работы. @media (min-width: 600px) блок: Демонстрация[^]

Если вы хотите разделить один из Столбцов на "верх и хвост" другого при меньших размерах экрана, это несколько сложнее.