I have a container and children elements. The container is positioned fixed with 10% height. Each child element must have 100% height and width equal to its height - this gets even more complicated when I add that my container is expanding horizontally not vertically. I would like to ask if this is possible using CSS because with JavaScript it could be easily achieved but I'd have to listen for window resizes which is a pain and I would like to avoid that.
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
}
.container > div {
display: inline-block;
height: 100%;
width: 50px;
border-radius: 50%;
border: solid 1px black;
}
https://jsfiddle.net/fdtajx3k/1/
The following might do the trick for you.
On your child div elements, use viewport units vh for both the width
and height values.
Also, add some bottom padding (optional) on your parent container if the scroll bar is an issue.
Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths
html,
body {
height: 100%;
}
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
padding-bottom: 30px;
}
.container > div {
display: inline-block;
height: 10vh;
width: 10vh;
border-radius: 50%;
border: solid 1px black;
box-sizing: border-box;
}
<div class=container>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
Related
I am trying to make basic CSS challenges. In this case I have an image that I have given a circle, but I do not know what to do so that it retains its aspect ratio, does not fully cover the entire circle and is centered. This is the code I have. I want to learn a way to achieve this effect with any image of any resolution.
Desired effect:
img{
border-radius:50%;
width:300px;
height:300px;
border: solid 1px black;
}
.image_container{
display:flex;
justify-content:center;
align-items:center;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Set the sizing condition on the container rather than the image.
img{
width: 100%;
height: auto;
}
.image_container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
padding: 30px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
You are using CSS on img that should be on .image-container. Then, you can set width for image enough to be centered and not override the circle, like this:
.image_container {
width:300px;
height:300px;
border-radius:50%;
border: solid 1px black;
display:flex;
justify-content:center;
align-items:center;
}
img {
width: 70%;
}
Maybe something like that?
* {
box-sizing: border-box;
}
img {
padding: 30px;
position: absolute; top: 50%; left: 0;
transform: translateY(-50%);
width: 100%;
}
.image_container {
border-radius: 50%;
border: solid 1px black;
overflow: hidden;
position: relative;
width: 300px; height: 300px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Outline
Wrap <img> tag in a block level tag and then wrap that tag with another block level tag:
<section class="frame">
<figure class="logo">
<img class="image">
...
Assign the top ancestor tag (demo. section.frame)
position: relative;
width: 50vw;
height: 50vw;
Basic CSS positioning -- parent is relative -- child is absolute -- child references its relative parent's area for X, Y position. The value: 50vw is equivalent to 50% of viewport width. This makes the tag responsive and it will dynamically change it's dimensions and maintain aspect ratio whenever the viewport width changes.
Assign the parent tag of <img> tag (demo. figure.logo)
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
This positions it to the edges of section.frame.
Assign the <img> the following:
display: block;
width: 100%;
height: 100%;
object-fit: contain;
This will position img.image to the edges of figure.logo
Added a :hover effect to show how the img tag fits within the figure and section tags. Each tag is assigned border-radius: 50% so that there are no square corners overlapping the visible border on section.frame.
.frame {
position: relative;
width: 50vw;
height: 50vw;
border: 3px solid #B9BBC0;
border-radius: 50%;
}
.logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
}
.image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.frame:hover {
background-color: #000;
}
<section class='frame'>
<figure class='logo'>
<img class='image' src='https://danikalaw.com/wp-content/uploads/2017/08/r.png'>
</figure>
</section>
References
Viewport CCS Concepts
object-fit: contain property
position property
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
I have a div inside another div. The outer div has a given width, but max-width should be 100%. The inner div is resizable but somehow the outer div doesn't seem to care whether or not the inner div gets wider. A scrollbar is displayed instead of sizing with the inner box to a maximum of 100%.
This fiddle demonstrates the issue; how can I have a div with a given width in px, set the inner div to resizable and have the outer div listen to the inner div's current width and size up to a maximum of 100%?
JSFiddle with the example
HTML
<div id="outer">
<div id="inner">resize me...</div>
</div>
CSS
#outer {
overflow: auto;
width: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
resize: both;}
Add the following CSS (or replace it):
#outer {
display: inline-block;
width: auto;
}
#inner {
width: 200px;
}
Live preview: JSFiddle
You should remove "width: 200px;" and add "float: left;" to "#outer"
Here is the code:
#outer {
overflow: auto;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
float: left;
}
see if this helps.
body {
padding: 0;
margin: 0;
}
#outer {
/* min-width: 200px;*/
/* max-width: 100%; */
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
display: inline-block;
box-sizing: border-box;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
max-width: 100%;
resize: both;
}
<div id="outer">
<div id="inner">resize me...</div>
</div>
I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table
<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>
css:
.div1 {
position: absolute;
overflow: hidden;
top: 10px;
left: 0px;
right: 0px;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 0 auto;
}
.div2 {
position: relative;
display: table;
overflow: hidden;
top: 200px;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
not working jsfiddle : http://jsfiddle.net/Y4kga/
the yellow div should be exactly ( touching ) under the red div
p.s. i'm using display: table because i have insite input type=image and i want the width the be as big as the input type.
How should i do this ?
thanks in advance!
Remove the absolute positioning from your div1 and add it to a wrapper div. Then the browser's layout engine can take care of positioning the yellow div beneath your red div.
<div class="wrapper">
<div id="div1" class="div1"></div>
<div id="div2" class="div2">lol</div>
</div>
Since div1 is no longer absolutely positioned, you can horizontally center using auto-margins.
.div1 {
margin: 0px auto;
margin-top: 10px;
}
http://jsfiddle.net/Y4kga/3/
Well, don't position your first div has absolute --> http://jsfiddle.net/tPJNg/1/
.div1 {
overflow: hidden;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 10px auto;
clear:both;
}
.div2 {
clear:both;
display: table;
overflow: hidden;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
That's it.
I have a div with the following css properties
#maindiv {
padding: 0px 30px 15px 30px;
background-color: #fff;
border-radius: 4px 0 0 0;
border: solid 2px #ccc;
min-height: 500px;
height: auto;
width: 100%;
}
I have a webgrid in this view. Unfortunately, the #maindiv does not expand to accomodate its content (the webgrid). How can I adjust the properties of he div to always expand to cover all its content?
EDIT:
I have two inner divs the structures is
<div id="maindiv">
<div class="container">
<div id="inner1">
<!-- my webgrid is contained here -->
</div>
<div id="inner2>
</div>
and the other css are as follows:
.container{
height: 100%;
width: 100%;
}
#inner1 {
height: 100%;
width: 700px;
float: left;
border: 2px solid #000;
}
#inner2 {
height: 100%;
width: 200px;
float: right;
margin-right: 90px;
}
You are not clearing after the floats. Floated elements are seen by the browser as having zero height, which is why their parent isn't expanding to fit them.
To solve the problem, add an empty div with clear: both; after #inner2 or add a clearfix to .container. The latter has the advantage of not cluttering your html with non-semantic tags and can be implemented like this.
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}