<div class="ui-datatable-scrollable-view" style="
width: 100%;
position: relative;
">
<div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px">
</div>
</div>
I have a div element which is stick on the top of the page. I have given the css as
width: 100%;
position: fixed;
z-index: 2;
But it is not taking the width.
I tried several ways to do that.
I tried making the parent div as position:relative but that is not working;
I think my element is taking the width equal to the width of screen.I tried giving the fixed width to it to fit the required size. But on change of screeen size it won't work proper.
I want it to take the width of its parent.
I just tried using your css and it works for me
HTML
<div class="container"></div>
CSS
.container {
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
background-color: black;
}
Check if your html and body elements have a width of 100%
Link to codepen: https://codepen.io/athapliyal/pen/VzqyBX
#test {
width: 100vw;
position: fixed;
z-index: 2;
height: 50px;
background-color: blue;
}
<div id="test">
If you provide the width as percentage it is relative to the parent of the div, so you could define the parent with a width of 100% to make it working. To provide you an example we would need more code.
So the other solution is by defining the width with 100vw.
1vw = 1% of viewport (window) width.
This way it will be relative to the viewport and doesn´t care about the parent.
For the height you can use: vh (Viewport height)
I believe that the width is in fact 100%, however since you did not set a height, it appears invisible.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 800px;
background-color: grey;
height: 600px;
}
.child {
position: fixed;
background-color: blue;
width: inherit; height: 100px;
}
Related
In css, how we can fixed width(in full 100% not in px) of a div which have property is position fixed inside the div which already used postion absolute property.
let me know about its. this issue I am facing for long time.Is there any solution of this?
I'm not sure if this is what you want but I find a solution on this post : Set width of a "Position: fixed" div relative to parent div
It use width:inherit
.parent {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
}
.child {
background-color: blue;
position: fixed;
width:inherit;
}
<div class="parent">
<div class="child">test</div>
</div>
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
In my project, there are some images. My code looks like:
<div className="col-sm-6">
<img src="xxx">
</div>
<div className="col-sm-6">
<img src="xxx">
</div>
The width of img is 100% of div, which is 50% of the whole screen. If I resize the browser, the width of image is changed. In this case, how to keep the height is still the same as width?
It depends on the aspect ratio of the image.
If you want to stretch the image to a square: since the container <div> is 50% of the whole screen. You could've written it as width: 50vw; (50% of the viewport width). The same for your image: width: 50vw; and to keep height the same as the width.:
.col-sm-6 img {
width: 50vw;
height: 50vw;
}
If the image is a square, just adjust width. Height will automatically adapt. Since you must be using Bootstrap (guessing from the class name col-sm-6).
If the image is always panoramic:
.container {
width: 50vw;
height: 50vw;
border: 1px solid lime;
overflow: hidden;
}
.container img {
height: 100%;
min-width: 100%;
}
<div class="container">
<img src="http://www.w3schools.com/css/img_lights.jpg">
</div>
Same logic above for always vertical images.
You can just set the width of the wrapper to equal width and height for this and 100% width and height for the img.
Another Option
You can also use the fact that padding is always calculated based on the width in CSS-
Position the img absolutely relative to its wrapper
Give the same value for padding-top and width (50vw each) and set height to zero for the wrapper.
Give width: 100% for the img
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align:top;
}
<div class="wrapper">
<img src="http://placehold.it/250x250">
</div>
Note that your images may stretch out if it is not a square image - you can opt according to your design to drop either of width: 100% or height: 100% so that the stretching won't happen. (or opt to use a square image of course!)
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align: top;
}
<div class="wrapper">
<img src="http://placehold.it/250x100">
</div>
Usually if the width auto then height fix hardware and vice versa, if you want auto height to auto-height of the current div
Is there any solution without JS?
html
<div class="wrapper">
<div class="fix"></div>
</div>
css
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}
I cant add any other styles for .wrapper except width: 100%;.
I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source
Here is JsFiddle Demo
A position:fixed element is not relative to its parent anymore. It respects only the viewport's boudaries.
MDN Definition:
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So any width, max-width, or whatever property will not be respected by the fixed element.
EDIT
In fact, it won't inherit the width because there's no width property defined on the wrapper.. So, try setting the child as width: 100% and inherit the max-width:
http://jsfiddle.net/mx6anLuu/2/
.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}
.fix {
max-width: inherit;
width: 100%;
height: 20px;
position:fixed;
background: black;
}
there is already a width on the column, just set the width of the fixed element to inherit. no reason to complicate things.
CSS:
.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }
HTML:
<div class="col-sm-3">
<div class="fixed-in-div">
...
</div>
</div>
It seems there is no solution without JS.
This blog post by Felipe Tadeo explains why:
https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied
It explains the confusion around width: inherit
"Fixed positions itself relative to the viewport... whenever you inherit width (with position fixed) it will be with respect to the viewport"
How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?
For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.
I don't want to use any JavaScript for this.
Using the CSS3 flexible box model would be fine.
If you are targeting modern browsers that support CSS3, you can try the following.
Consider the following HTML snippet:
<div class="wrapper">
<div class="inner">Inner content...</div>
</div>
and apply the following CSS rules:
html, body {
height: 100%;
}
body {
margin: 0;
}
.wrapper {
background-color: lightblue;
height: 100%;
}
.wrapper .inner {
margin: 0 auto;
background-color: beige;
height: 100%;
width: 66.6666666666vh;
}
The .wrapper element takes up 100% of the view port height because I have set
height: 100% on the body and html elements.
The inner wrapper .inner has a height: 100% and fills up the parent block.
To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.
In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).
See demo at jsFiddle
Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.
See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility
Alternative Approach Using a Spacer Image
Consider the following HTML:
<div class="ratio-wrapper">
<img class="spacer" src="http://placehold.it/20x30">
<div class="content">Some content...</div>
</div>
and apply the following CSS:
.ratio-wrapper {
position: relative;
display: inline-block;
border: 1px solid gray;
height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
height: 100%; /* set height: 100% for portrait style content */
visibility: hidden;
vertical-align: top;
}
.ratio-wrapper .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
The .ratio-wrapper container has two child elements, an img.spacer and div.content.
The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.
The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.
See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/
Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?
You can do this by sticking a 2px by 3px image and an inner div as siblings into an outer div which has display: inline-block; applied. Now when you set the image to have a height of 100%, and you absolutely position the inner div to be as high and wide as its ancestor, you can set the height of the outer div, and the width of all elements involved will be exactly equal and based on the aspect ratio of the image.
Here's a jsFiddle demonstrating this approach.
HTML
<div>
<div>2 by 3</div>
<img src=".../twobythree.png" />
</div>
CSS
body > div {
height: 300px;
position: relative;
display: inline-block;
}
img {
display: block;
height: 100%;
}
div > div {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}