Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как закрепить div? (https://javascript.ru/forum/xhtml-html-css/66008-kak-zakrepit-div.html)

nekada 21.11.2016 04:50

Как закрепить div?
 
Приветствую, есть такая структура.

<div class="wrapper">
  <div class="content"></div>
  <div class="sidebar"></div>
</div>


При уменьшении окна браузера нужно прижимать div content - дивом sidebar.

sidebar на float:right или на inline-block и имеет стат. width:200px;
content на max-width и min-width, нужно, что бы sidebar прыгал под контент, когда content достигнет min-width.

В настоящий момент при уменьшении окна sidebar прыгает под content и уже потом content прижимается окном.

ksa 21.11.2016 08:50

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: 1px solid;
}
.content {
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 400px; 
	max-width: 800px; 
	height: 100px;
	background-color: red;
}
.sidebar {
	flex-basis: 200px;
	height: 100px;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="wrapper">
	<div class="content">content</div>
	<div class="sidebar">sidebar</div>
</div>
</body>
</html>

nekada 21.11.2016 23:52

Благодарю за попытку помочь, но что-то не работает, полностью сделал как Вы описали...
Sidebar по прежнему уезжает под контент, как только не хватает места ему....

ksa 22.11.2016 08:20

Цитата:

Сообщение от nekada
Sidebar по прежнему уезжает под контент, как только не хватает места ему....

А разве не этого ты хотел? :blink:
Цитата:

Сообщение от nekada
нужно, что бы sidebar прыгал под контент


nekada 22.11.2016 20:27

Вы сейчас троллите ? )))

Цитата:

, когда content достигнет min-width.


Часовой пояс GMT +3, время: 16:12.