Nano Hash - криптовалюты, майнинг, программирование

Масштабировать содержимое с размером меню

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

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

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

Допустим, содержимое рядом с меню будет меньше, чем само меню. Тогда зеленые разделы пойдут под меню. Это не то, чего я хочу добиться. Я думал о масштабировании высоты контента с помощью Javascript, если элемент контента слишком мал.

Считаете ли вы, что это правильный путь для достижения желаемого результата? Или вы могли бы предложить лучший/более чистый способ сделать это? (Пример на jsfiddle был бы отличным)

Заранее спасибо!

Изменить: я также хотел бы сообщить, что высота меню должна быть динамической. Например, что, если я добавлю дополнительный пункт меню.

javascript menu scale html css
13.11.2017

  • Stack Overflow не является сервисом для написания кода. 13.11.2017
  • Как насчет min-height:321px;? 13.11.2017

Ответы:


1

Вы имеете в виду что-то вроде этого?

Просто будьте осторожны, это работает только в СОВРЕМЕННЫХ браузерах, так как я использую взлом флажка :)

Вот фрагмент кода

*{
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}

#head{
	background-color:#000;
	border-bottom:#333 solid 1px;
	display:block;
	padding:10px 0px 0px 10px;
}
#head ul{
	background-color:#f00;
	display:block;
	width:150px;
	position:relative;
	list-style:none;
	margin:0px;
	text-align:center;
}
#head li{
	display:none;
}
#head input{
	display:none;
}
#head input:checked ~ li{
	display:block;
}
#head input:checked ~ label{
	background-color:#511;
	color:#fff;
}
#head label{
	font-family:Constantia;
	width:100%;
	padding:10px 0px;
	color:#333;
	border-bottom:#111 dotted 1px;
	display:block;
	font-weight:bold;
	text-transform:uppercase;
}
#head label:hover{
	background-color:#511;
	color:#fff;
	cursor:pointer;
}
#head a:link{
	background-color:#f00;
	width:150px;
	display:block;
	color:#111;
	text-decoration:none;
	border-bottom:#333 solid 1px;
	padding:10px;
	float:left;
	margin-right:10px;
}
#head a:visited{
	color:#111;
}
#head a:hover{
	background-color:#911;
	color:#fff;
	border-bottom:#211 solid 1px;
	font-weight:bold;
}
#body{
	padding:10px;
}
<div id="head">
			<ul>
				<input type="checkbox" id="menu" />
				<label for="menu">Menu</label>
				
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</div>
		
		<div id="body">
			<h1>Content</h1>
			<p> All my content sits here what am I suppose to do?</p>
		</div>

Используя поплавки, а не абсолютную позицию, позволяет браузеру узнать, что под заголовком должен быть контент, если бы мне пришлось изменить его, чтобы применить абсолютную позицию, он все равно вышел бы из заголовка, но не будет занимать место перед контентом не будет перемещаться рядом с ним или под ним, а будет позади навигации.

Вы должны увидеть, что содержимое будет идти под ним, когда окно станет меньше, если вы хотите, чтобы содержимое не было немного раздавлено, прежде чем перейти под навигацию, чтобы установить min-width для тега #body{}.

13.11.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..