Я уверен, что на что-то подобное уже ответил, но я не смог найти точный сценарий, с которым я сейчас имею дело, вот моя проблема: у меня есть div в правом (с фиксированной шириной)и вся левая сторона от другого div. Хорошо, я могу правильно разместить оба элемента, но моя проблема в том, что второе содержимое отображается под первым элементом. Я пробовал несколько конфигураций без успеха. Я знаю, что это глупый вопрос, но я был бы очень признателен за любую помощь, которую вы можете предоставить.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div style="display: inline-block; width:100%; display: inline-block;">
<div id="sidemenu" style="background-color: #004E87; position: fixed; width: 100px; height: 100%; float:left; display: inline-block;">
</div>
<div id="leftside" style="width: 100%; float:right; background-color: yellow; display: inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Обновлено с помощью flex!
Теперь моя проблема в том, что я не могу получить высоту 100Экран .. А помогите?
<div class="flex-container" style="display: flex; width: 100%; background-color: green; align-items: stretch;">
<div class="flex-item" style="background-color: yellow; width: 100px; height: 100%;">1</div>
<div class="flex-item" style="background-color: red; width: 100px;">2</div>
</div>
Я был бы очень признателен за любую помощь, которую вы можете предоставить.