I have an image that eventhough it has a parent set to overflow: hidden still overflows and creates a horizontal scroll on the page. Shown here
Here is the relevant code:
.section2img {
overflow-x: hidden !important;
height: min-content;
position: relative;
width: 50vw;
right: -60%;
top: 0;
}
.section2 img {
position: relative;
overflow-x: hidden !important;
}
GitRepo if needed
So what you can do is set the width of the img so it match with the website and then add object-fit: cover; to the img, what it does is to cut the part that overflows.
Related
#border-search {
position: relative;
top: 50% !important;
left: 25% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: none;
}
#border-search.center img {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: auto;
}
How do i get it to stay centered. ive tried many different things, but they dont work. the display none needs to stay since I need it to show hide the image. What else do i need to add to get thi to work? I want it to stay centered horizontally only
here is js fiddle
http://jsfiddle.net/matsuiny2004/zffvcvkk/
You can try to center your current #border-search inner img element with the following change in your CSS, relatively positioning your image with automatic (and equal) left- and right-margins, and making it centered.
#border-search {
margin: 0 auto;
position: relative;
}
#border-search img {
display: block;
margin: 0 auto;
position: relative;
}
The display: block; statement is needed for your image to be considered a block element so it can be affected by the margin attributes.
Check the demo JS Fiddle to validate what I just said. :)
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I have a Bootstrap built website which contains an overlay footer which open upon clicking the footer menu.
Inside this footer is a scrollable content area which works correctly when a fixed height is set on the scrollable div. As the site is responsive I need this scrollable area to be a percentage height which seems to stretch out of the visible window.
An example is here: http://jsfiddle.net/JUESu/5/
#footer-content {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 1;
display: block;
color: #7f7f7f;
height:85%;
}
.scrollable {
overflow-y: scroll;
height: 50%; /* Doesnt Work */
/*height: 300px; /* Works */
width: 95%;
background: red;
}
How can I have a scrollable div inside a fixed position container?
Giving maximum height should fix it
.scrollable {
overflow-y: scroll;
max-height:300px;
height: 50%;
width: 95%;
background: red;
}
Here is the fiddle
http://jsfiddle.net/JUESu/10/
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
I am trying to make height auto. Whatever i tried did not work until now.
I am using masterpage, asp.net 4.0 ,css
Here the config
Here the css classes
*
{
margin: 0;
padding: 0;
}
.logo
{
height: 100px;
width: 1000px;
position: absolute;
top: 0px;
}
body, html
{
height: auto;
height: 100%;
}
.footer
{
visibility: hidden;
}
.MenuBarMasterPage
{
position: absolute;
top: 202px;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 40px;
}
body
{
background: #0C0C0C url(http://static.monstermmorpg.com/images/backgrounds/animus-mix.gif) repeat;
margin-right: auto;
margin-left: auto;
width: 1000px;
background-position: top center;
}
.main
{
position: absolute;
top: 242px;
width: 1000px;
background: #D1D1D1 url(http://static.monstermmorpg.com/images/backgrounds/content.png) repeat;
z-index: 2;
height: auto;
}
According to the firebug the computed style height of main is 0px this is the problem
To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:
Use JavaScript to calculate the height.
Don't use absolute positioning.
There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.
You're going to need a lot of float: left and float: right.
If you're using Bootstrap 4 (Flex)
If your <img> is direct children of a div with display:flex, you might want to set display:block on parent div instead, so height:auto will work.