堆栈内存溢出
  简体   繁体   English

如何调整按钮的大小以适应他的父母（响应式）？

[英]How to adapt the size of a button to his parent (responsive)?

 原文  2022-12-20 11:07:43  6   2    html/ css

问题描述

Hello I am currently having a problem adjusting the size of the button to the size of the header.您好，我目前在将按钮的大小调整为标题的大小时遇到问题。 Indeed, I would like the button to remain in its header in terms of width and height, depending on the screen size.事实上，我希望按钮在宽度和高度方面保留在其标题中，具体取决于屏幕尺寸。 I tried to use vh and vw to make the button fit the screen size but it did not work.我尝试使用 vh 和 vw 使按钮适合屏幕大小，但它不起作用。

Here is the files HTML and CSS:这是文件 HTML 和 CSS： 

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box }:root{ /* ===== Colors ===== */ --body-color: #E4E9F7; --sidebar-color: #FFF; --primary-color: #1c1a1a; --primary-color-light: #F6F5FF; --toggle-color: #DDD; --text-color: #707070; /* ===== Transition ===== */ --tran-02: all 0.2s ease; --tran-03: all 0.3s ease; --tran-04: all 0.4s ease; --tran-05: all 0.5s ease; } body{ height: 100vh; background: var(--body-color); } /*Paramètres de la page des templates*/.home{ position: relative; height: 100vh; left: 78px; width: calc(100% - 78px); background: var(--body-color); transition: var(--tran-05); } /*Paramètre texte de la page*/.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 8px 40px; } /*Activer le mouvement de la page*/.sidebar.active ~.home{ left: 240px; width: calc(100% - 78px); } /*--------------------- FENETRE MODAL PARAMETRE ---------------------*/.modal-container-param{ display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #1c1a1a; background: rgba(0, 0, 0, 0.4); z-index: 1; }.parameter{ position: relative; top: 25%; background-color: rgb(170, 170, 170); margin: 100px auto; padding: 0; width: 300px; max-width: 85%; }.parameter.popup-header{ padding: 2px 16px; background-color: #ffffff; color: #1c1a1a; display: flex; }.parameter.popup-header h1{ font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 500; }.parameter.close-modal{ position: absolute; top: 0px; right: 0px; font-size: 10px; padding: 1.5px 20px; border: none; border-radius: 0px; cursor: pointer; background: #fff; color: rgb(0, 0, 0); }.parameter.close-modal:hover{ color: #FFF; background: rgb(188, 15, 15); }.parameter.popup-body{ padding: 2px 16px; }.form{ width: 100%; }.form h1{ font-size: 17px; display: flex; justify-content: center; align-items: center; margin-top: 10px; font-family: Montserrat, sans-serif; font-weight: bold; }.form.input_field{ margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_c select{ margin-top: 10px; margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_l select{ margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field.input, .form.input_field.textarea{ width: 30%; outline: none; border: 1px solid #d5dbd9; font-size: 15px; padding:1px 2px; border-radius: 3px; transition: all 0.3s ease; }.form.input_field.btn{ width: 100%; padding: 8px 10px; font-size: 15px; border: 0; background: #707070; color: #FFF; cursor: pointer; outline: none; }.form.input_field.btn:hover{ background: #11101d; color: #FFF; }.form.link{ margin-top: 10px; }.tcp{ display: none; }.tcp.active{ display:block; }.udp{ display: none; }.udp.active{ display:block; }.serie{ display: none; }.serie.active{ display:block; }
 <:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <.-- https.//developer,mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <:-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'. script-src 'self'"> --> <.----===== CSS ===== --> <link rel="stylesheet" href="style.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <title>Sail Vision</title> </head> <body> <div class="modal-container-param"> <div class="overlay"> <div class="parameter"> <div class="popup-header"> <button class="close-modal modal-trigger-param">X</button> <h1>Paramétres de liaisons</h1> </div> <div class="popup-body"> <div class="form"> <div class="custom_select_c"> <label>Type de centrale</label> <select name="selectc" class="selectc"> <option value="nmea" selected>NMEA</option> <option value="nke">NKE</option> <option value="bravo" >BRAVO</option> </select> </div> <div class="custom_select_l"> <label>Type de liaisons</label> <select class="selectl" name="selectl"> <option value="serie" selected>SERIE</option> <option value="udp">UDP</option> <option value="tcp" >TCP</option> </select> </div> <div class="link"> <div class="udp udp-input" id="u"> <div class="input_field"> <label>Numero de port IN</label> <input type="text" class="input"> </div> </div> <div class="serie serie-input" id="s"> <div class="input_field"> <label>Com</label> <input type="text" class="input"> </div> </div> <div class="tcp tcp-input" id="t"> <div class="input_field"> <label>Adresse IP</label> <input type="text" class="input"> </div> <div class="input_field"> <label>Numero de port</label> <input type="text" class="input"> </div> </div> </div> <div class="input_field"> <input type="submit" value="Connect" class="btn"> </div> </div> </div> </div> </div> </div> </body> </html>

Regards,问候，

2 个解决方案

解决方案1
 3 已采纳  2022-12-20 11:55:24

A tag element with relative positioning gives you the control to absolutely position children elements inside of it.具有相对定位的标记元素使您可以控制绝对定位其内部的子元素。 So add position relative to the class 'popup-header' and set the height to 100% to the class '.parameter.close-modal' so it will take 100% of the height of its parent:因此，添加相对于“popup-header”类的位置，并将“.parameter.close-modal”类的高度设置为 100%，这样它将占据其父级高度的 100%：

.parameter .popup-header {
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
    position: relative;
}

.parameter .close-modal {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
    height: 100%;
}

解决方案2
 1  2022-12-20 11:59:09

copy this code.复制此代码。 It should work now.它现在应该工作了。 If not let me know in the comments.如果没有，请在评论中告诉我。

If you set children elements as position: absolute;如果将子元素设置为position: absolute; the parent element must be set as position: relative;父元素必须设置为position: relative; . . Otherwise absolute positioning will cause problems.否则绝对定位会出问题。 

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box }:root{ /* ===== Colors ===== */ --body-color: #E4E9F7; --sidebar-color: #FFF; --primary-color: #1c1a1a; --primary-color-light: #F6F5FF; --toggle-color: #DDD; --text-color: #707070; /* ===== Transition ===== */ --tran-02: all 0.2s ease; --tran-03: all 0.3s ease; --tran-04: all 0.4s ease; --tran-05: all 0.5s ease; } body{ height: 100vh; background: var(--body-color); } /*Paramètres de la page des templates*/.home{ position: relative; height: 100vh; left: 78px; width: calc(100% - 78px); background: var(--body-color); transition: var(--tran-05); } /*Paramètre texte de la page*/.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 8px 40px; } /*Activer le mouvement de la page*/.sidebar.active ~.home{ left: 240px; width: calc(100% - 78px); } /*--------------------- FENETRE MODAL PARAMETRE ---------------------*/.modal-container-param{ display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #1c1a1a; background: rgba(0, 0, 0, 0.4); z-index: 1; }.parameter{ position: relative; top: 25%; background-color: rgb(170, 170, 170); margin: 100px auto; padding: 0; width: 300px; max-width: 85%; }.parameter.popup-header{ padding: 2px 16px; background-color: #ffffff; color: #1c1a1a; display: flex; position: relative; }.parameter.popup-header h1{ font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 500; }.parameter.close-modal{ position: absolute; top: 0px; right: 0px; font-size: 10px; padding: 1.5px 20px; border: none; border-radius: 0px; cursor: pointer; background: #fff; color: rgb(0, 0, 0); }.parameter.close-modal:hover{ color: #FFF; background: rgb(188, 15, 15); }.parameter.popup-body{ padding: 2px 16px; }.form{ width: 100%; }.form h1{ font-size: 17px; display: flex; justify-content: center; align-items: center; margin-top: 10px; font-family: Montserrat, sans-serif; font-weight: bold; }.form.input_field{ margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_c select{ margin-top: 10px; margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l{ display: flex; align-items: center; justify-content: center; color: #11101d; font-size: 14px; }.form.custom_select_l select{ margin-bottom: 2px; border: 1px solid #d5dbd9; width: 30%; height: 100%; padding: 1px 2px; border-radius: 3px; }.form.custom_select_l label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.custom_select_c label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field label{ width: 150px; color: #11101d; margin-right: 10px; font-size: 15px; }.form.input_field.input, .form.input_field.textarea{ width: 30%; outline: none; border: 1px solid #d5dbd9; font-size: 15px; padding:1px 2px; border-radius: 3px; transition: all 0.3s ease; }.form.input_field.btn{ width: 100%; padding: 8px 10px; font-size: 15px; border: 0; background: #707070; color: #FFF; cursor: pointer; outline: none; }.form.input_field.btn:hover{ background: #11101d; color: #FFF; }.form.link{ margin-top: 10px; }.tcp{ display: none; }.tcp.active{ display:block; }.udp{ display: none; }.udp.active{ display:block; }.serie{ display: none; }.serie.active{ display:block; }
 <:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <.-- https.//developer,mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <:-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'. script-src 'self'"> --> <.----===== CSS ===== --> <link rel="stylesheet" href="style.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <title>Sail Vision</title> </head> <body> <div class="modal-container-param"> <div class="overlay"> <div class="parameter"> <div class="popup-header"> <button class="close-modal modal-trigger-param">X</button> <h1>Paramétres de liaisons</h1> </div> <div class="popup-body"> <div class="form"> <div class="custom_select_c"> <label>Type de centrale</label> <select name="selectc" class="selectc"> <option value="nmea" selected>NMEA</option> <option value="nke">NKE</option> <option value="bravo" >BRAVO</option> </select> </div> <div class="custom_select_l"> <label>Type de liaisons</label> <select class="selectl" name="selectl"> <option value="serie" selected>SERIE</option> <option value="udp">UDP</option> <option value="tcp" >TCP</option> </select> </div> <div class="link"> <div class="udp udp-input" id="u"> <div class="input_field"> <label>Numero de port IN</label> <input type="text" class="input"> </div> </div> <div class="serie serie-input" id="s"> <div class="input_field"> <label>Com</label> <input type="text" class="input"> </div> </div> <div class="tcp tcp-input" id="t"> <div class="input_field"> <label>Adresse IP</label> <input type="text" class="input"> </div> <div class="input_field"> <label>Numero de port</label> <input type="text" class="input"> </div> </div> </div> <div class="input_field"> <input type="submit" value="Connect" class="btn"> </div> </div> </div> </div> </div> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使图像适应按钮大小？ - How to adapt image to button size? 如何使用Flex在自适应布局中调整图像大小 - How adapt size of image in responsive layout using flex 如何使父元素的大小与他的孩子的大小完全相同，而他的孩子绝对位于祖父母的位置？ - How to make parent element the same size as his child which is absolutely positioned to his grandparent? 在CSS中使父项适应其子项的最大大小 - Adapt parent to maximum size of it's children in CSS 对响应式网格的任何建议，将适应不同浏览器的文本大小和布局？ - Any suggestions for a responsive grid that will adapt text size and layout for different browsers? Bootstrap 响应按钮大小 - Bootstrap responsive button size 表Div的范围已超出父Div的范围，但应适应大小 - Tables Div grows beyond parent Div, but should adapt to size HTML：视频如何适配iFrame大小？ - HTML: How to adapt video to iFrame size? 如何使字体大小适应字符长度 - How to make font size adapt to character length Bootstrap，如何使徽标适应导航栏大小？ - Bootstrap, how to adapt a logo to the navbar size?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM