容器不会根据其内容自动调整大小

问题描述 投票：0回答：2

`

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #b0cac7;
}

.container {
    background-color: #ffffff;
    min-width: 80%;
    overflow: relative;
    position: relative;
    max-height: min-content;

    height: auto;
    padding: 3%;
    margin: 5%;
    border-radius: 0%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    background-color:#none;
    font-size:16px;
    resize:none;
    border-radius: px;
    border:2px solid #707070;
    outline:none;
}

textarea::placeholder {
    font-size: 1rem;
    color: #9c9c9c;
}

.container .form {
    margin-top: 30px;
}

.form .input-box {
    width: 100%; 
    margin-top: 10px;
}

.input-box label {
    color: #333;
}

.form .input-box input {
    position:relative;
    height: 50px;
    width: 100%;
    font-size: 1rem;
    color: rgb(39, 34, 34);
}

.form :where(.input-box input, .select-box,) {
    position: relative;
    height: 50px;
    width: 100%;
    outline:none;
    font-size: 1rem;
    color: #707070;
    margin-top: px;
    border: 2px solid #cfd1d6;
    border-radius: 1px;
    padding: 0 15px;
}

.column {
    margin: -1%; /*used -1 to reduce spaces between each textarea */
    flex: 50%;
    padding: 10px;  
}

#date { /*used -10 margin bottom to remove the space to heading below */
    margin-bottom: -10%;
}

.other {
    margin-left: 20px;
}


h1 {
    font-size: 30px;
    text-align: center;
    color: #1c093c;
    margin-top: 15px;
}

p {
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #606060;
    font-size: 14px;
    font-weight: 400;
}

form {
    width: 100%;
    position: relative;
    margin: 30px auto 0 auto;
}


.row {
    margin-top: 1px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
}
label i{
    color: #1c093c;
    font-size: 16px;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    margin-top: -5%;
    display: flex;
    padding: 10px;
}

.wrapper {
    border: 1px solid #707070;
    border-right: 0;

}

.column .input-box #name {
    margin-bottom: 20%%;
}

canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.jSignature {
    background-color: rgb(151, 23, 23);
}

button#clear {
    height: 100%;
    background: #0e5272;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

button#clear span {
    transform: rotate(90deg);
    display: block;
}


textarea,
input {
    width: 100%;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 0.5%;
    border: 2px solid #cfd1d6;
    margin-top: 5px;
}

textarea:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

input:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

h4 {
    margin-top: 1px;
    padding: 10px;
}

button {
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    color: #ffffff;
    border-radius: 3px;
}

@media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
  
    /*trying to style the button to be wrapped */
    .upload .up {
      flex-wrap: wrap;
    }
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
    <!--Signaure pad link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>

<body>

    <section class="container">
        <h1>Site Report Sheet</h1>
        <form action="#" class="form">

            <div class="row">
                <div class="column">
                    <label for="client">Client details</label>
                    <textarea id="client" name="client" placeholder="Enter details here.." rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="site">Site Name & Address</label>
                    <textarea id="issue" name="issue"  placeholder="Enter details here..." rows="3"></textarea>
                </div>
            </div>

            <div class="column">
                <div class="input-box">
                    <label>WIS Number</label>
                    <input type="text" required />
                </div>

                <div class="input-box" id="date">
                    <label>Date</label>
                    <input type="date" required />
                </div>
            </div>

            <br>
            <br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            
           <!--This will be an open space for middle of Report-->


            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

                <div class="column">
                    <div class="input-box">
                        <label id="name">Name</label>
                        <input type="text" required />
                    </div>
                </div>
<br><br>
                  <!--Signature pad-->
                  
                <label>Signature</label> <br><br>
                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="300" height="100"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>
                
                <div class="column">
                    <div class="input-box">
                        <label>On Behalf Of</label>
                        <input type="text" required />
                    </div>
                    <div class="input-box">
                        <label>Position</label>
                        <input type="text" required />
                    </div>
                
                    <div class="input-box" id="date">
                        <label>Date</label>
                        <input type="date" required />
                    </div>
                </div>

         

           





        </form>
    </section>
    </div>
</body>

</html>

`我正在制作一个表单，在线遵循基本的 html 和 css 规则，但是现在不确定为什么我的容器已停止自动调整其内容的大小。

我尝试将溢出从隐藏更改为相对，这确实有助于内容的可见性，但仍然位于容器之外。我尝试添加一个位置：相对；到容器，但这什么也没做。我尝试删除高度，然后尝试从 height:auto; 更改高度高度：相对。我检查了是否已将任何内容设置为绝对定位，但我没有设置。我尝试添加溢出：自动；将其移回到容器中，但我不希望滚动在侧面......

html css forms containers inputbox
2个回答
0
投票

这是由于 

margin-bottom: -10%;
上的 
#date
将元素移出了容器。只需删除它：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #b0cac7;
}

.container {
    background-color: #ffffff;
    min-width: 80%;
    overflow: relative;
    position: relative;
    max-height: min-content;

    height: auto;
    padding: 3%;
    margin: 5%;
    border-radius: 0%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    background-color:#none;
    font-size:16px;
    resize:none;
    border-radius: px;
    border:2px solid #707070;
    outline:none;
}

textarea::placeholder {
    font-size: 1rem;
    color: #9c9c9c;
}

.container .form {
    margin-top: 30px;
}

.form .input-box {
    width: 100%; 
    margin-top: 10px;
}

.input-box label {
    color: #333;
}

.form .input-box input {
    position:relative;
    height: 50px;
    width: 100%;
    font-size: 1rem;
    color: rgb(39, 34, 34);
}

.form :where(.input-box input, .select-box,) {
    position: relative;
    height: 50px;
    width: 100%;
    outline:none;
    font-size: 1rem;
    color: #707070;
    margin-top: px;
    border: 2px solid #cfd1d6;
    border-radius: 1px;
    padding: 0 15px;
}

.column {
    margin: -1%; /*used -1 to reduce spaces between each textarea */
    flex: 50%;
    padding: 10px;  
}

#date { /*used -10 margin bottom to remove the space to heading below */
    /* margin-bottom: -10%; */
}

.other {
    margin-left: 20px;
}


h1 {
    font-size: 30px;
    text-align: center;
    color: #1c093c;
    margin-top: 15px;
}

p {
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #606060;
    font-size: 14px;
    font-weight: 400;
}

form {
    width: 100%;
    position: relative;
    margin: 30px auto 0 auto;
}


.row {
    margin-top: 1px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
}
label i{
    color: #1c093c;
    font-size: 16px;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    margin-top: -5%;
    display: flex;
    padding: 10px;
}

.wrapper {
    border: 1px solid #707070;
    border-right: 0;

}

.column .input-box #name {
    margin-bottom: 20%%;
}

canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.jSignature {
    background-color: rgb(151, 23, 23);
}

button#clear {
    height: 100%;
    background: #0e5272;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

button#clear span {
    transform: rotate(90deg);
    display: block;
}


textarea,
input {
    width: 100%;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 0.5%;
    border: 2px solid #cfd1d6;
    margin-top: 5px;
}

textarea:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

input:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

h4 {
    margin-top: 1px;
    padding: 10px;
}

button {
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    color: #ffffff;
    border-radius: 3px;
}

@media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
  
    /*trying to style the button to be wrapped */
    .upload .up {
      flex-wrap: wrap;
    }
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
    <!--Signaure pad link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>

<body>

    <section class="container">
        <h1>Site Report Sheet</h1>
        <form action="#" class="form">

            <div class="row">
                <div class="column">
                    <label for="client">Client details</label>
                    <textarea id="client" name="client" placeholder="Enter details here.." rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="site">Site Name & Address</label>
                    <textarea id="issue" name="issue"  placeholder="Enter details here..." rows="3"></textarea>
                </div>
            </div>

            <div class="column">
                <div class="input-box">
                    <label>WIS Number</label>
                    <input type="text" required />
                </div>

                <div class="input-box" id="date">
                    <label>Date</label>
                    <input type="date" required />
                </div>
            </div>

            <br>
            <br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            
           <!--This will be an open space for middle of Report-->


            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

                <div class="column">
                    <div class="input-box">
                        <label id="name">Name</label>
                        <input type="text" required />
                    </div>
                </div>
<br><br>
                  <!--Signature pad-->
                  
                <label>Signature</label> <br><br>
                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="300" height="100"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>
                
                <div class="column">
                    <div class="input-box">
                        <label>On Behalf Of</label>
                        <input type="text" required />
                    </div>
                    <div class="input-box">
                        <label>Position</label>
                        <input type="text" required />
                    </div>
                
                    <div class="input-box" id="date">
                        <label>Date</label>
                        <input type="date" required />
                    </div>
                </div>

         

           





        </form>
    </section>
    </div>
</body>

</html>

0
投票

尝试使用 100% 高度

.container {
    background-color: #ffffff;
    min-width: 80%;
    overflow: hidden;
    position: relative;
    height: 100%;
    padding: 3%;
    margin: 5%;
    border-radius: 0%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.