Блог

Главная - Вопросы по программированию - Изменение размера элемента div при изменении размера экрана

Изменение размера элемента div при изменении размера экрана

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня есть два столбца с тегом выбора и кнопки.

Я задал 100% высоту им обоим. Когда я пытаюсь изменить размер высоты экрана каждого элемента, меняется.

Как я могу предотвратить это при изменении размера экрана?

 #btn-folder{
    width: 100%;
    height: 100%;
background-color:rgb(194, 191, 191);
color: white;
padding: 12px 45px;
border: none;
border-radius: 10px;
text-align: center;
cursor: pointer;
font-size:16px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
#btn-folder:hover{
background-color:rgb(94, 89, 89);
}
.custom-selection{
  position:relative;
  background-color:white;
  border-radius: 10px;
  height: 100%;
}
.custom-selection select {
  display: block;
  border:none;
  background-color:white;
  color: blue;
  padding: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  margin: 0;      
  -webkit-appearance: none;
  -moz-appearance: none;
  position:relative;
  z-index:2;
  background:transparent;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container-fluid ">
    <div class="row dropdown">
      <div class="col-sm-9 ">
        
        <div class="custom-selection">
            <select class="round" id="myselect">

              </select>
            </div>
            </div>
        <div class="col-sm-3 folder-btn">
            <button id="btn-folder" class="btn btn-light"> Open Folder</button>
          </div>
    </div>
</div>

Комментарии:

1. просто добавьте класс `text-nowrap px-2` в btn-идентификатор папки

2. Вы должны уменьшить левое и правое заполнение кнопки — #btn-folder{padding: 12px 10px;}

3. @NIKHILCHANDRAROY пробовал это, но когда я изменяю размер страницы примерно до 650 пикселей, текст в кнопке переполняется

4. @PrakashRajotiya все еще меняется при изменении размера

5. Есть ли какой — нибудь другой подход ?