I'm working on a project in which I have a left menu and a form positioned as can be seen in the following image:
As you can see there is a margin between these two elements, in this case the margin was applied to the form on the left side. Now, maybe there is a simple solution for this but I've been stuck trying to find it, is there any way in which the margin start to decrease as soon as the form overflows the viewport when resizing?
Relative units like vw or % are not an option because they will assign a porcentage of the screen but never will be 0. Basically I want to start shrinking the margin until the form element hits the Menu as I resize the screen. Something like this:
The only constraint is that the margin should not be greater than 180px. Here's the html that I used for this example:
<!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>Document</title>
<style>
body, html {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
display: flex;
flex-direction: row;
background-color: #ccc;
}
.left-menu {
flex-shrink: 0;
width: 450px;
min-height: 100vh;
background-color: purple;
text-align: center;
}
.form {
width: 500px;
height: 500px;
background-color: blue;
margin-left: 180px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-menu">
<h1>Menu</h1>
</div>
<div class="form">
<h1>Form</h1>
</div>
</div>
</body>
</html>
Maybe this could be achieved without margins but with layouts or another workaround, any idea is welcome though.
You can wrap your class="form" element inside of another div with class="form-container". And add the following css:
.form-container{
width:100%;
height:100%;
display:flex;
justify-content:center;
}
Related
Assume there is a list of lists of images to be displayed on a web page. Images within a list should be grouped in the same, horizontal row (e.g. with display: flex), and those groups should be displayed in a vertical column (e.g. with display: flex; flex-direction: column). The total height of the groups of horizontally ordered images should be equal to the height, of the viewport. The number of image groups and number of images within a groups in the whole list is variable, but I am using two sets of two images apiece as an proof of concept. Furthermore, the original size of these images is variable, so they need to be resized.
How can the images be resized so as to maintain their aspect ratio and fit properly within the webpage without overflow?
I have written the following HTML code with the following CSS to accomplish this. The problem is that the images are not resized (at all) to fit the main div, and the image-group divs overflow the main container. How do I force the image-group divs to shrink to the height of the main-container, and the images to resize to the height of their parent divs?
HTML:
<body>
<div class="main-container">
<div class="image-group" id="dup-set-1">
<img src="./images/1.jpg" class="duplicate-image">
<img src="./images/2.jpg" class="duplicate-image">
</div>
<div class="image-group" id="dup-set-2">
<img src="./images/3.png">
<img src="./images/4.jpg">
</div>
</div>
</body>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
flex-direction: column;
margin: auto;
width: 100%;
height: 100vh; /* Make the whole container the height of the viewport*/
border: 10px red solid;
}
.image-group {
flex: 1; /* Size the group divs to the height of the main container */
display: flex;
}
.image-group img {
max-height: 100%;
max-width: 100%;
height: 100%; /* Make the image height fit the height of its parent group div */
width: auto; /* Scale the image to keep its original apsect ratio */
}
I have seen this question, which suggests using flex-grow and this question;
which suggested object-fit; however, these questions dealt only with one image-group (i.e. only one intermediate div) and do not seem to resize the image-group divs.
Working now ... (edit: improved code)
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Modal Popup Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
flex-direction: column;
margin: auto;
max-width: 100%;
max-height: 100%;
border: 10px red solid;
}
.image-group {
max-width: 50%;
max-height: 50%;
min-width: 50%;
min-height: 50%;
display: inline-flex;
flex-direction: row;
}
.image-group img {
max-width: 100%;
height: auto;
object-fit: cover;
}
</style>
</head>
<body>
<div class="main-container">
<div class="image-group" id="dup-set-1">
<img src="https://images.pexels.com/photos/6102161/pexels-photo-6102161.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
<img src="https://images.pexels.com/photos/6101986/pexels-photo-6101986.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
</div>
<div class="image-group" id="dup-set-2">
<img src="https://images.pexels.com/photos/3334492/pexels-photo-3334492.jpeg?auto=compress&cs=tinysrgb&w=600">
<img src="https://images.pexels.com/photos/5802141/pexels-photo-5802141.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
</div>
</body>
</html>
flex css property should use with 3 parameters : grow , shrink, basis
grow determine if the flexbox can take full space if have some
shrink determine if the flexbox can take more size IF NEEDED !
basis determine their limits (size)
Example here :
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#wrapper > header {
width: 100%;
flex: 0 0 50px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e5e5e5;
border-bottom: 1px solid #9b9b9b;
}
#wrapper > section {
width: 100%;
flex: 1 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<section id="wrapper">
<header>HEADER</header>
<section>CONTENT</section>
</section>
</body>
</html>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.
I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).
If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.
If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.
The width for content seems to work well.
I have tried changing the height for body and wrapper but it doesn't seem to do anything?
Adding overflow: hidden; to body doesn't seem to work either.
Help is appreciated. Thank you.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
header {
text-align: left;
flex: 0 0 auto;
padding: 20px;
}
#content {
display: flex;
flex-flow: row;
width: 100%;
flex: 1 1 auto;
}
#sidebar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 0 0 20%;
background-color: #00e7eb;
}
#calendar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 1 1 auto;
background-color: #c8eed6;
}
footer {
text-align: center;
flex: 0 0 auto;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Journal</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="currentCalendar">Quarter</h1>
</header>
<div id="content">
<div id="sidebar">
<h4>Calendars</h4>
<button>+ Add Calendar</button>
<h4>Classes</h4>
<button>+ Add Class</button>
<h4>Tags</h4>
<button>+ Add Tags</button>
</div>
<div id="calendar">
<p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
</div>
</div>
<footer>
<p>dg</p>
<button>Donate</button>
</footer>
</div>
</body>
</html>
I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try
html, body { min-height: 100%; }
Try adding height: 100vh; to the target element.
in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:
body{
height: 100vh; /*viewport-height=100% of screen height*/
}
and then you can set the first child of that to 100%
I am placing elements aligned to the top and bottom of body, which has its size set explicitly:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
height: 1024px;
width: 1280px;
font-size: 20pt;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
div {
background: red;
color: white;
}
.down {
margin-top: auto;
}
</style>
</head>
<body>
<div class="up">upper text</div>
<div class="down">lower text</div>
</body>
</html>
The bottom element, however, extends outside of the preset size (I attach two screenshots because I could not have at the same time the Chrome dev tools displaying the computed size and the ruler app showing its length - this is the same window):
Why is it so? Shouldn't all the components of the div (content, padding, border) be taken into account when calculating the position?
You need to remove the default margin from the body:
body {
height: 1024px;
width: 1280px;
font-size: 20pt;
display: flex;
flex-direction: column;
margin: 0;
}
Have you tried resetting the default values of the body?
if not, you may try this
body {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
I just want to design a simple chat with CSS for learning purpose, but I can not understand, why the 2 DIV container are not showing off like I would them to.
Here is my current code:
<!DOCTYPE HTML>
<html>
<head>
<title>Chat</title>
<meta charset="UTF-8">
<style type="text/css">
* {
font-size: 36px;
}
#messages {
height: 95%;/* Does not work but for example 500px works */
width: 80%;
float: left;
background: grey;
overflow: auto;
}
#users {
height: 95%;/* Does not work but for example 500px works */
width: 20%;
background: dimgrey;
overflow: auto;
}
input {
width: 100%;
height: 5%;
background: lightgrey;
}
</style>
</head>
<body>
<section>
<div id="messages"></div>
<div id="users"></div>
<input type="text">
</section>
</body>
So why does it work with px and with % it does not ?
When using percentages for height, the height is relative to a parent, so you need to establish a baseline. Typically this is done by setting the height on the html and body elements. In your case, you'd also need to set it on the section:
html, body, section {
height:100%;
}
jsFiddle example
I tried to style container full width and height border line, in pc version it is ok, but test on iPhone, there is a little space(10px) in right side.
But only in vertical mode will see this happen, rotate to horizontal is ok.
Why? How to solve it?
UPDATE
I tried add box-sizing:border-box not work.
And right now I'm using overflow: hidden (Responsive website on iPhone - unwanted white space on rotate from landscape to portrait) to not let user scroll to see white space, but the space between container border line and content, right side is smaller. So I set content margin-right bigger than left make it still looks like center.
But I want to know why and find perfect way
Is it something wrong related I using meta tag? if I remove meta tag it is fine both vertical and horizontal mode
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
min-height: 100%;
border: 10px solid #000000;
}
.content {
width: 100%;
margin: 0 auto;
}
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div class="container">
<div class="content"></div>
</dvi>
</body>
</html>
Html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div id="solution" class="container">
<div class="content"></div>
</div>
</body>
</html>
CSS
html, body {
width: auto;
height: 100%;
}
.content {
width: 100%;
margin: 0 auto;
background:#000;
height:200px;
}
.container {
width: 100%;
padding: 10px;
border: 30px solid #999;
}
#solution {
box-sizing: border-box;
}
check below fiddle http://jsfiddle.net/manjunath_siddappa/53grcpdv/,
i hope, it may help you.
Your container has 100% width + 1px border on each side thus making it bigger than 100%.
Try one of these solutions:
.container{
box-sizing: border-box;
}
.container{
width: calc(100% - 2px);
}
.container{
max-width: 100%;
}