Question posted in 
I have a registration form. Container form – and inside div elements (login/email)
-
Height and Width are constant (width: 90%, height: 440px). Why its constant – Because i need exact height for this. OtherWise it stretch on the whole website height.
-
And have <div class="error"> element – where i "innerHTML’ error message after each form (email / password) . But when it inserts ERROR, ilogin form gets out of container form (images)
Click "SIGN UP" – the "right-autorization" container size doesn’t stretch ( . How to stretch "right-autorization" to its new size with messages ?
You can run code here: https://jsfiddle.net/krekercod4/f94rsgky/4/
<!-- begin snippet -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VK.COM</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vk.js"></script>
</head>
<body>
<div class="zero">
<div id="head" class="container" >
<nav class="nav" >
<div><img src="logo.png" class="img1" type="button"></box-icon></div>
<div><form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-black" type="submit">Search</button>
</form></div>
<div class="music">
<i class='bx bx-skip-previous bx-md' type="button"></i>
<i class='bx bx-play bx-md' type="button"></i>
<i class='bx bx-skip-next bx-md' type="button"></i>
</div>
<div class="profilePicture">
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container center">
<div class="left">
<div class="leftTop">
<div class="link" type="button"><i class='bx bx-user-circle bx-sm'></i>My Profile</div>
<div class="link" type="button"><i class='bx bx-news bx-sm'></i>News</div>
<div class="link" type="button"><i class='bx bx-chat bx-sm'></i>Messages</div>
<div class="link" type="button"><i class='bx bx-phone-call bx-sm'></i>Calls</div>
<div class="link" type="button"><i class='bx bx-group bx-sm'></i>Friends</div>
<div class="link" type="button"><i class='bx bx-male-female bx-sm'></i>Communities</div>
<div class="link" type="button"><i class='bx bx-camera bx-sm'></i>Photos</div>
<div class="link" type="button"><i class='bx bx-music bx-sm'></i>Music</div>
<div class="link" type="button"><i class='bx bx-video bx-sm'></i>Videos</div>
<div class="link" type="button"><i class='bx bx-photo-album bx-sm'></i>Clips</div>
<div class="link" type="button"><i class='bx bx-dice-6 bx-sm'></i>Games</div>
<div class="link" type="button"><i class='bx bx-store bx-sm'></i>Market</div>
</div>
<hr>
<div class="leftBottom1">
<div class="link" type="button"><i class='bx bx-game bx-sm'></i>Mini apps</div>
<div class="link" type="button"><i class='bx bx-money bx-sm'></i>VK Pay</div>
</div>
<hr>
<div class="leftBottom1">
<div class="link" type="button"><i class='bx bx-book bx-sm'></i>Bookmarks</div>
<div class="link" type="button"><i class='bx bx-file bx-sm'></i>Files</div>
<div class="link" type="button"><i class='bx bx-help-circle bx-sm'></i>Help</div>
</div>
<hr>
<div class="let-bottom-text"><a href="">Blog</a><a href="">Developers</a> <a href="">Creators</a><a href="">About us</a></div>
<hr>
<div class="let-bottom-text"><a href="">Recomendations for using this website</a></div>
</div>
<div class="center-orta">
<div class="top-line">
<img src="profile.png" class="profile-pic">
<input type="text" placeholder="What's new?">
<div class="icons" type="button"><i class='bx bx-camera bx-sm'></i>
<i class='bx bx-play-circle bx-sm'></i>
<i class='bx bx-music bx-sm'></i>
<i class='bx bx-left-indent bx-sm'></i>
<i class='bx bx-microphone bx-sm'></i></div>
</div>
<div class="news-bar1">
<div class="news-background">
<div class="news-top-head">
<div class="head1">
<div><a href=""><img src="p1.jpg"></a></div>
<div class="head-text"><a href=""><h6>Чтение Книг</h6></a><p>8 Jul at 18:00 pm - from Andrey Golonicki</p></div>
</div>
<div class="dropdown">
<button class="btn btn-secondary " type="button" data-bs-toggle="dropdown" aria-expanded="false">... </button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="news-data"><p>На кадрах запечатлена простая, но волшебная встреча двух миров — мира малыша и мира маленького жучка, приносящего удачу.</p>
<p>На этой нежной детской ножке, словно капелька счастья, уютно расположилась божья коровка. Мягкие складочки кожи и крошечные пальчики кажутся настоящим чудом природы.</p>
<p>Этот момент, полный трепетной нежности, напоминает нам о красоте и чистоте первых открытий и радостей жизни.</p>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="y1.webp" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="y2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="y3.avif" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="news-end">
<div class="news-end-cover">
<div class="news-buttons">
<div class="like end-border"><i class='bx bx-heart bx-sm' type="button"></i></div>
<div class="comment end-border"><i class='bx bx-message bx-sm' type="button"></i></div>
<div class="share end-border"><i class='bx bx-share bx-flip-horizontal bx-sm' type="button"></i></div>
</div>
<div class="eye end-border2"><i class='bx bx-low-vision bx-sx' type="button"></i> <span>6.3K</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<form class="right-authorization">
<div class="sign-in">
<i class='bx bx-user bx-sm'></i>
SIGN-UP
</div>
<hr>
<div class="login">
<div class="login-outside" >
<div class="login-write">
<i class='bx bx-user bx-xs'></i>
<input class="inside" type="text" placeholder="email" id="email" >
</div>
</div>
<div id="emailDiv" class="invalid"></div>
<div class="login-outside">
<div class="password login-write">
<i class='bx bx-lock-alt bx-xs'></i>
<input class="inside" type="password" placeholder="password" minlength="6" id="password">
</div>
</div>
<div id="passDiv" class="invalid"></div>
<div class="login-outside">
<div class="name-surname login-write">
<i class='bx bx-edit-alt bx-xs'></i>
<input class="inside" type="text" placeholder="full name" id="fullName">
</div>
</div>
<div id="fullNameDiv" class="invalid"></div>
<div class="login-outside">
<div class="number login-write">
<i class='bx bx-phone bx-xs'></i>
<input class="inside" type="text" placeholder="phone number" id="phoneNumber">
</div>
</div>
<div id="phoneDiv" class="invalid"></div>
<button type="button" onclick="userRegister()">Sign up</button>
<div class="register-text">
<span>Already have an account ? <br><a href="web-site_login.html">Sign in</a></span>
</div>
</div>
</form>
</div>
</div>
</body>
<script>
</script>
</html>
<style>
body{
background-color:#141414;
}
@media (min-width: 1200px) {
.container{
max-width: 1100px;
}
}
.zero{
background-color: #222222;
}
#head{
background-color: #222222;
width: 100%;
height: 55px;
}
nav{
color: white;
display: inline;
justify-content: space-between;
align-items: center;
padding: 8px 0px 0px 0px;
}
.music{
margin: 0px 200px 0px 0px ;
}
.btn-group:hover{
background-color: #72aaeb;
color: white;
}
.nav img{
height: 40px;
width: 50px;
border-radius: 5px;
}
.bx-skip-previous, .bx-play, .bx-skip-next, .bx-bell{
color: #6b6b6b;
}
.form-control {
background-color: grey;
border-color: grey;
}
.form-control:hover {
background-color: rgb(255, 255, 255);
}
.btn-outline-black{
color: grey;
border-color: grey;
}
.btn-outline-black:hover{
color: black;
background-color: white;
}
.nav .bx:hover{
color: white;
}
.profilePicture img{
height: 50px;
width: 50px;
}
.btn-group .btn{
background-color: transparent;
border-color: transparent;
height: 40px;
width: 60px;
}
.btn-group .dropdown-toggle{
width: 40px;
}
.left{
width: 15%;
/*border: 2px solid white;*/
}
.link{
padding: 6px;
font-size: 14px;
width: 100%;
margin-top: px;
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.left .bx{
color: #72aaeb;
}
.center{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.container .link:hover{
background-color: rgb(58, 58, 58);
border-radius: 5px;
}
hr{
color: white;
width: 80%;
margin-left: 12px;
}
.let-bottom-text{
width: 80%;
font-size: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-left: 12px;
}
.let-bottom-text a{
color: gray;
text-decoration: none;
}
.let-bottom-text a:hover{
text-decoration: underline white;
color: rgb(165, 165, 165);;
}
.center-orta{
/*border: 2px solid white;*/
width: 52%;
display: flex-row;
justify-content: center;
}
.top-line{
width: 100%;
height: 50px;
border: 1px solid #363738;
border-radius: 12px;
background-color: #222222;
padding: 15px;
padding-left: 20px;
display: flex;
align-items: center;
}
.top-line input{
background-color: transparent;
border-color: transparent;
margin-left: 10px;
width: 480px;
}
.top-line input:focus{
border-color: transparent ;
outline: none;
color: white;
}
.top-line input:focus::placeholder{
color: white;
}
.top-line .bx{
color: #666666;
}
.top-line .icons{
display: flex;
gap: 8px;
}
.top-line .bx:hover{
color: #8c8989;
}
.profile-pic{
width: 30px;
}
.head1{
/*border: 2px solid white;*/
display: flex;
align-items: center;
}
.news-background{
width: 92%;
}
.head1 img{
height: 45px;
width: 45px;
border-radius: 100%;
}
.head-text a{
text-decoration: none;
color: #72aaeb;
}
.head-text a:hover{
color: #95c5fc;
}
.head-text{
margin: 16px 0px 0px 15px ;
}
.head1 p {
color: #868585;
font-size: 14px;
margin-top: -8px;
}
.news-top-head{
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown .btn{
background-color: transparent;
border-color: transparent;
color: #868585;
font-size: 35px;
margin-bottom: 30px;
}
.dropdown .btn:active{
background-color: transparent;
border-color:transparent ;
}
.news-bar1{
border: 1px solid #363738;
border-radius: 12px;
background-color: #222222;
margin-left: 0px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.news-data p{
font-size: 14px;
color: white
}
.slide{
padding: 4px 0px 20px 0px;
}
.news-buttons{
display: flex;
gap: 10px
}
.news-end{
padding: 0px 0px 15px 0px;
color: white
}
.end-border{
background-color: #333333;
display: flex;
border-radius: 50px;
padding: 8px 15px 8px 15px;
color: #b2b2b2;
cursor: pointer;
}
.end-border:hover{
background-color: #373737;
}
.carousel-item img{
width: 300px;
height: 500px;
border-radius: 12px;
object-fit: cover;
}
.news-end-cover{
display: flex;
justify-content: space-between;
}
.end-border2{
display: flex;
align-items: center;
gap: 5px;
border-radius: 50px;
padding: 8px 0px 8px 15px;
color: #b2b2b2
}
.bx-low-vision{
color: #666666;
}
.eye span{
font-size: 12px;
color: #666666;
}
.right{
background-color: #222222;
border-radius: 12px;
width: 30%;
display: flex;
justify-content: center;
}
.right-authorization{
width: 90%;
height: 440px;
max-height: 640px;
border: 1px solid #363738;
border-radius: 12px;
background-color: #2d2d2d;
color: white;
padding: 5px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 400;
justify-content: center;
gap: 8px;
margin-top: 15px;
overflow: visible;
}
.sign-in{
display: flex;
align-items: center;
gap: 6px;
margin-top: 15px;
}
.login-outside {
background-color: #222222;
border-radius: 10px;
border: 1px solid #363738;
padding: 5px;
margin-top: 10px;
display: flex;
align-items: center;
gap: 5px;
}
.login-write{
margin-left: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.login-write input{
margin-bottom: 2px;
color: white;
width: 200px;
}
.inside{
background-color: transparent;
border-color: transparent;
}
.login-write input:focus{
border-color: transparent;
outline: none;
}
.login{
display: flex;
flex-direction: column;
align-items: center;
}
.login button{
background-color: #5e8abe;
border: 1px solid #363738;
border-radius: 10px;
padding: 3px 20px;
font-weight: 500;
width: 110px;
height: 35px;
margin-top: 20px;
color: white;
}
.login button:hover{
background-color: white;
color: black;
}
.register-text{
font-size: 12px;
color: #8f8f8f;
padding: 10px;
display: flex;
text-align: center;
margin-top: 10px;
}
.register-text a{
text-decoration: underline rgb(193, 193, 193);
color: white;
}
.register-text a:hover{
color: #7a7a7a;
}
.invalid {
color: #ff2748;
border-color: #ff2748;
margin-top: 5px;
width: 100%; /* Заставляем текст занимать всю доступную ширину */
word-wrap: break-word; /* Переносим слова, если они длинные */
}
</style>
<script>
function userRegister(){
let emailField = document.getElementById("email").value;
let passField = document.getElementById("password").value;
let fullNameField = document.getElementById("fullName").value;
let phoneField = document.getElementById("phoneNumber").value;
let person = {
email: emailField,
password: passField,
fullName: fullNameField,
phoneNumber: phoneField,
};
let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
if(emailField==""){
emailDiv.innerHTML="Please inter Email";
}
if(passField==""){
passDiv.innerHTML="Please inter password";
}
if(fullNameField==""){
fullNameDiv.innerHTML="Please inter full name";
}
if(phoneField==""){
phoneDiv.innerHTML="Please inter phone number";
}
else{users.push(person);
localStorage.setItem("UsersVK",JSON.stringify(users));
alert("User saved successfully");}
}
</script>
I tried to give "right-autorization" class height auto: but it strecth to whole website. I need it to be form 440px to 660px (when stretched with error message)
Also tried to give min and max height. Doesn’t work. Applies only max height.
2
Answers
You problem is not clear from the description and images as you have not added an image showcasing the issue.
I assume you want to increase height of form with right-authorization class to match height of it’s children.
If so, that can be achieved by adding the following css in .right-authorization class
https://developer.mozilla.org/en-US/docs/Web/CSS/height
Hope this helps. If not, let me know what i missed and please provide just the min reproducible code and error screenshots if possible to give others clarity on your issue.
To set a
min-heightand amax-heightto an element is the same as giving it a fixedheight. If you want the element to stretch: set itsheightto100%and add amin-height. Themin-heightwill be its base height. Something like this should do it:The updated code is the following: