The height of my iFrame is too short but if I change it from 100% it doesn't change the container it just changes the scrolling height.
How would I make my container taller?
This is Bootstrap framework and to make the iFrame responsive I need certain code, if I change the height the scrolling height of the iFrame changes.
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Change the iFrame container height please
I think you can't use (℅ )for height, you should use min-height and max- height property with( PX )and then check the responsive if you want!
I managed to find a fix by adding !important on the height attribute forthe container.
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
height: 600px !important;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Related
How is it possible to make an video fullscreen responsive.
I've tried it with:
video{
width: 100%;
}
And:
video{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
But I've got only problems with that. I can't put stuff below the video, its too big and small screens are not full with the video ...
Screenshot1
Screenshot2
You need to take margins of the body and set video to 100% width, auto height and position relative. codepen example: https://codepen.io/anon/pen/oMQveO
body {
margin: 0;
}
video {
position: relative;
width: 100%;
height: auto;
}
Here's the HTML:
<div class="container">
<div class="wrapper">
<iframe src="...."></iframe>
</div>
</div>
The wrapper div has CSS:
position: relative;
width: 100%;
height: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
The iframe has CSS:
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
The container has CSS:
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
max-width: 1280px;
max-height: 720px;
I'm trying to protect the aspect ratio 16:9 of the iframe as the window resizes and also maintain a maximum height for it of 100% - 67px calc(100% - 67px). How can I do the two at the same time?
I had the same issue. Ended up making another wrapper for the wrapper to get the effect of both.
The inner wrapper ensures that the aspect ratio is retained as padding-bottoms' value is scaled from width. The iframe fills it's container, and the outer wrapper provides the max-width so that it stops expanding after 865px.
.video-wrapper-wrapper {
max-width: 865px;
margin: auto;
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 82%;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
Instead of using padding to set the height, set the height to the viewport width:
height: 56.25vw; /* 16:9 */
You can then set a max-height to whatever you like.
The solution is to wrap the entire thing in an element with max-height: ___; overflow: hidden.
I have a div header which is fixed to the top of the page with a nested div. The div container has a height of 70px, a fixed height.
I want the nested div to have a height of 100% of the screen, not of the container div.
This is my code:
<div class="header">
<div class="nested">Content</div>
</div>
My css:
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow-x: visible;
overflow-y: auto;
background-color: #ddd;
}
How can I get my nested div to be the height of the screen, not the container?
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: relative;
margin-top: 70px;
height:100vh;
background-color: #ddd;
}
Fiddle:https://jsfiddle.net/ek7zfzua/1/
For making the child div 100% in height, you will have to first let the parent div be 100%.
The child div cannot break open the boundaries of its parent and show up in complete screen unless the parent div boundaries are big enough.
You can use height:100vh instead of percentage: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
I have a sidebar on the right that'll pop out from off-screen once triggered. I keep it in the body tag because it needs to always be the same height as the entire page which varies from page-to-page. If I give the body an overflow-x: hidden, it'll hide the contents on smaller browser windows and not allow them to scroll. Is there any way around this?
I need the sidebar to scroll with the page, so I can't use position: fixed
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: -100px;
width: 100px;
height: 100%;
}
<div id="sidebar"></div>
This is just a stripped down example.
One simple answer is to place the sidebar inside a position: absolute container (.hideScroll) which has overflow: hidden.
The new parent is given the entire width and height of the viewport and wont affect body scrolling.
In this example I have used viewport percentage lengths (vh) instead of percentage heights. These units get their height from the viewport and are not relative to any parents.
Example
Hover over the body in the window to trigger the sidebar.
.hideScroll {
overflow: hidden;
position: absolute;
height: 100vh;
left: 0;
top: 0;
width: 100%
}
#sidebar {
position: absolute;
top: 0;
width: 100px;
height: 100vh;
background: #F00;
right: -100px;
transition: right 1s;
}
body {
margin: 0;
/*150 height is for the example to make the body scroll*/
height: 150vh;
}
/*For example to show the sidebar on body hover*/
body:hover #sidebar {
right: 0;
}
<div class="hideScroll">
<div id="sidebar">Content</div>
</div>
Add display: none; to the sidebar:
#sidebar { display: none; position: absolute; top: 0; right: -100px; width: 100px; height: 100%; }
Then when you move it into the main window, set display: block; at the same time.
My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.