0

Здравствуйте У меня есть блок 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;
      } 
1
  • 1
    Схему нарисуй, сложно в тексте разобраться.
    – Qwertiy
    10 авг 2020 в 15:53

1 ответ 1

0
#left { ...
position:relative;
  } 
#contents_of_left{width:100%; height:100%; overflow-y:scroll;}
#changelevel{...
position:absolute; bottom:0px; width:100%;
} //всегда виден снизу блока #left и шириной равной ширине #left

все что внутри #left кроме #changelevel обернуть в контейнер, например #contents_of_left, c высотой 100% минус высота #changelevel и с шириной 100% и c overflow-y:scroll;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.