100% высота переполняет мой гибкий макет

Я создал своего рода макет святого Грааля с помощью flex box. Это работает так же, как и без полос прокрутки, пока я не вставлю текстовый редактор Quill в свой контейнер content_wrapper. В этом контейнере есть верхняя панель инструментов, а также главный div для редактора внутри.

Когда я пытаюсь установить высоту редактора на 100%, это создаст переполнение (я думаю, потому что он занимает 100% тела, но не распознает, что над ним также есть моя настраиваемая синяя панель инструментов) .

Как мне настроить мою страницу, чтобы редактор не выходил за пределы страницы внизу?

Запустите этот фрагмент кода на странице полного просмотра, пожалуйста!

html,body { 
	height:100%; 
	margin: 0;
	padding: 0;
}

.main_wrapper {
	background-color: white;
	display: flex;
	min-height: 100vh;
	flex-direction: row;
}

.content_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	background-color: grey;
	flex: 0 0 195px;
}

header.topbar {
	background-color: blue;
	flex: 0 0 50px;
}

main {
	background-color: white;
	flex: 1;
}

.contentbar {
	background-color: grey;
	flex: 0 0 405px;
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype</title>

  <link rel="stylesheet" href="style.css">
  <!-- Text Editor Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
	
</head>

<body>
	<div class="main_wrapper">
		<aside class="sidebar"></aside>
		<div class="content_wrapper">
			<header class="topbar"></header>
			<main>
				<div id="editor"></div>
			</main>
		</div>
		<div class="contentbar"></div>
	</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
	
  var options = {
      bounds: 'main',
	  theme: 'snow'
	};
	var editor = new Quill('#editor', options);
</script>

</html>


css flexbox quill
person olop01    schedule 18.11.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Используйте функцию CSS calc().

Панель инструментов над редактором занимает немного места, вам следует уменьшить это место в нижней части .ql-container. height .ql-toolbar может отличаться на разных экранах.

Нравиться:

.ql-container {
  height: calc(100% - 42px); /* 100% - height of 'ql-toolbar' */
}

Взгляните на приведенный ниже фрагмент:

html,body { 
	height:100%; 
	margin: 0;
	padding: 0;
}

.main_wrapper {
	background-color: white;
	display: flex;
	min-height: 100vh;
	flex-direction: row;
}

.content_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	background-color: grey;
	flex: 0 0 195px;
}

header.topbar {
	background-color: blue;
	flex: 0 0 50px;
}

main {
	background-color: white;
	flex: 1;
}

.contentbar {
	background-color: grey;
	flex: 0 0 405px;
}

.ql-container {
  height: calc(100% - 42px);
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype</title>

  <link rel="stylesheet" href="style.css">
  <!-- Text Editor Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
	
</head>

<body>
	<div class="main_wrapper">
		<aside class="sidebar"></aside>
		<div class="content_wrapper">
			<header class="topbar"></header>
			<main>
				<div id="editor"></div>
			</main>
		</div>
		<div class="contentbar"></div>
	</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
	
  var options = {
      bounds: 'main',
	  theme: 'snow'
	};
	var editor = new Quill('#editor', options);
</script>

</html>

Надеюсь это поможет!

person Saurav Rastogi    schedule 18.11.2016
comment
Хм, для меня у вашего фрагмента все еще есть переполнение, когда я просматриваю его в режиме полной страницы :( - person olop01; 18.11.2016
comment
О нет, извините, я видел, что этот код действительно работает, он просто был перезаписан кодом редактора. Я попробую это сделать в своем локальном прототипе и постараюсь, чтобы он не перезаписывался, когда редактор создает свой код - дайте мне секунду :) - person olop01; 18.11.2016
comment
Действительно, это работает (мне просто нужно было настроить очередь загрузки css)! Спасибо за это решение! Мне действительно интересно, почему Quill все равно не вычисляет это само по себе ... - person olop01; 18.11.2016
comment
@ olop01 С удовольствием! - person Saurav Rastogi; 18.11.2016