The resizing mechanism is covered by #inner element on Chrome, but shown on Firefox.
Here is sample codes:
<div id="outer" style="width:200px; height: 30px; background: lightgreen; overflow: hidden; resize: both; position: relative;">
<div id="inner" style="position: absolute; right: 0; width: 100px; height: 100%; background: lightblue;"></div>
</div>
Result:
Chrome:
Firefox:
First question is: Which behavior is correct one? Or is there specification of what browser SHOULD do?
Second question is: I want all browsers show the resizing mechanism (just like what Firefox does), so that I can resize the #outer element. Is there any workaround?
Changed the placement of green and blue so the left side with blue was revealed and showing the resizer.
<div id="outer" style="width:200px; height: 30px; background: lightblue; overflow: hidden; resize: both; position: relative;">
<div id="inner" style="right: 0; width: 100px; height: 100%; background: lightgreen;"></div>
</div>
Related
Is it possible to make an element with position: absolute; have the full height of its parent, including overflowed content?
In the following code snippet the .line element gets cut off when scrolling the .container:
.container {
position: relative;
height: 150px;
width: 300px;
overflow-y: scroll;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
Adding another wrapper can solve the issue:
.container {
height: 150px;
width: 300px;
overflow-y: scroll;
}
.container > div {
position: relative;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div>
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
</div>
The height: 100%; of the absolutely positioned element refers to the given CSS heigth (i.e. the height defined in the CSS rule) of the relative parent, not to its stretched "real height" when it overflows. So it will always have the initial parent height which is defined via CSS.
To achieve what you want, you'd have to get the parent height via javascript and apply it to the child.
I need to create the illusion that an article's content is sliding underneath it's title when scrolling the page. The HTML looks like this:
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="body">
<p>a lot of content</p>
</div>
</div>
CSS looks like this at this point:
.wrapper{
height: 100vh;
width: 50%;
margin-left: 25%;
margin-top: 100px;
position: relative;
}
.header{
padding: 20px;
background-color: #fff;
position: fixed;
display: block;
box-sizing: border-box;
width: calc(50% - 8px);
z-index: 2;
}
.body{
z-index: 1;
top: 120px;
position: absolute;
padding: 20px;
background-color: #fff;
}
https://jsfiddle.net/joris508/frad472j/
Because there's an image in the background of the real website, I can't just put an element with a higher z-index to the top to hide that part.
I also tried to make the content portion (.body) scrollable itself. That created the right effect visually, but because the background-image on the page has a parallax scroll effect, scrolling the div itself caused problems.
Is there any solution to this problem?
my problem is the following:
I have a div, which has a set of buttons, each one with a popup associated to him.
<div id="floatingFilter">
<div class="div-1">
<button class="popupActivator">Trigger Popup</button>
<div class="popupContainer"><span>This is my popup.</span></div>
</div>
</div>
CSS:
#floatingFilter {
height: 100%;
width: 200px;
overflow-y: scroll;
position: fixed;
top: 0px;
right: 0px;
}
.popupContainer {
position: fixed;
right: 190px;
top: 100px;
width: 100px;
height: 100px;
}
When I open a popup, on Safari OSX, I can only see the first 10px of the popupContainer. The rest of it is hiddden.
Anyone had that problem/have a solution? It works in the remaining browsers.
See plunker
It is because you have position:fixed set. This will not allow it to scroll. If you removed this rule then it works fine.
DEMO http://jsfiddle.net/wtTLf/
Is this a Chrome bug?
Here's the HTML:
<div><img src="test.png"></div>
Here's the CSS:
* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }
Expected result: The img should have a height of 65px.
Result in Chrome (v. 27.0.1453.116) on Mac OS (v. 10.6.8): The img has height of 135px and "bleeds" into the parent div's padding. If I change the padding of the div to 50px 0, oddly it renders properly.
Play with this in a codepen: http://codepen.io/anon/pen/jhbKz
Screenshots:
First block has padding of 50px 0. Second block has padding of 75px 0 60px.
Firefox (correct result)
Chrome (wrong?)
Try adding a container to your Image with width and height of 100%. This will give you the same output on chrome and FF.
<div class="b">
<div style='height:100%;width:100%;'>
<img src="some image url">
</div>
</div>
I cannot explain why this fix works currently, but I myself am trying to reason with it.
Years later, the issue seems to have spread to Firefox.
Pav's workaround did not work for me, maybe because I have "a" not "div". The only way in my case was to display as table:
<div style="display: table;">
<a style="height: 100px; display: table-cell;" href="#">
<img style="max-height: 100%; width: auto;" src="some image url">
</a></div>
An additional benefit of "table" is that vertical-align: middle; can be used to center the image (or other content) vertically.
You can achieve it using position: absolute for your image.
<div class="wrap">
<img class="img" src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg" alt="">
</div>
body {
height: 100vh;
}
.wrap {
display: inline-block;
position: relative;
max-height: 500px;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.1);
}
.img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
jsfiddle
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.