Здравствуйте У меня есть блок main
который состоит из двух частей left и right и его ширина равна width:calc(100% - 30px - 225px);
100 процентам минус ширина границы (бордер) с двух сторон и 225px - правое меню. Ширина блока left равна половине ширины блока main то есть (main {width:calc(100% - 30px - 225px)})/2 - это я написал для наглядности.
Высота блока left тоже вычисляемая height:calc(100vh - 7.5em - 30px);
100vh минус высота шапки 7.5ем минус высота двух его бордеров( по 15px каждая). в блок left(если более точным то в блок id="restext", который находится внутри left) приходит контент, что при переполнении высоты left в нем появляется прокрутка, а сама страница остается без прокрутки.
Я хочу сделать блок id="changelevel" в блоке left, чтобы он находился внизу left и был всегда виден, даже если контента много. Если я сделаю его абсолют можно будет как-то вычислить, чтобы его ширина была равна ширине блока left? как это выглядит без блока id="changelevel" можете посмотреть здесь trenajor.me/result/result.htlm
вот часть кода из result.html
</header>
<div id="main">
<div id="left">
<div id="list"></div>
<div id="restext"></div>
<div id="changelevel" style="position:relative; width:100%;
border-top-style:solid; border-top-color:black; border-top-width:1px;">
<input type="radio" id="radeasy" value="easy" name="radio-group" checked>
<label for="radio-input-1" class="">Л</label>
<input type="radio" id="radmiddle" value="middle" name="radio-group">
<label for="radio-input-2" class="">Ср</label>
<input type="radio" id="radhard" value="hard" name="radio-group">
<label for="radio-input-2" class="">Сл</label>
<input type="radio" id="radextreme" value="extreme" name="radio-group">
<label for="radio-input-2" class="">Э</label>
<input type="radio" id="radnocipher" value="nocipher" name="radio-group">
<label for="radio-input-2" class="input-helper input-helper--radio">БШ</label>
<input type="radio" id="radnotext" value="notext" name="radio-group">
<label for="radio-input-2" class="">БТ</label>
<button id ="but_go" class="go">Go</button>
</div>
</div>
<div id="right"></div>
</div>
вот часть кода style.css:
#main {
min-height:calc(100vh - 7.5em);
width:calc(100% - 30px - 225px);
margin:0 10px;
border:15px solid #525252;
float:left;
}
#left { height:calc(100vh - 7.5em - 30px);
width:50%;
border-right-width:15px;
border-right-color:#525252;
border-right-style:solid;
float:left;
overflow:auto;
}