I'm currently trying to implement a horizontal scroll that works with vertical scroll.
Therefore I created a container and rotated it, same for the content.
<div class="horizontal-scroll-wrapper">
<div class="horizontal-cart">
<div class="horizontal-image-container">
<img src="cart.image" class="horizontal-image" alt="cart.title">
</div>
</div>
</div>
My goal is to have the container fill the whole screen, center all images aligned next to each other (without any margin) and be able to see overflow by scrolling horizontally (when actually scrolling vertically).
You can find my code in the following fiddle: https://jsfiddle.net/9engubxq/1/
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
This seems to me currently like the quadrature of the circle, but nevertheless I try to ask this question here.
I need the following:
header - 100% width, fixed at top
content - fixed width, vertically scrolling content
footer - same width as content, fixed at bottom
scrollbar - scrolling horizontally simultaneously content and footer
I.e. there should be only one horizontal scrollbar at the bottom which scrolls content and footer simultaneously, but no scrollbar between content and footer. The vertical scrollbar should only affect the content.
(of course, the horizontal scrollbar should be auto, i.e. only appear if content/footer width is larger than the current viewport width)
The closest I have arrived at is the following HTML/CSS:
<!doctype html>
<html>
<head>
<title>scroll attempt</title>
</head>
<body style="overflow-x:hidden;height:100vh;margin:0;">
<div style="height:100vh;display:flex;flex-direction:column;">
<div style="width:100%;height:100px;background-color:red;">header</div>
<div style="display:flex;flex-direction:column;height:100%;overflow-x:auto;overflow-y:hidden;">
<!--
the following div should only have a vertical scrollbar,
hence overflow-x:visible; - which is not respected
when setting overflow-x:hidden; the horizontal scrollbar disappears
but then the vertical scrollbar moves when scrolling horizontally
-->
<div style="flex:1;background-color:yellow;overflow-x:visible;overflow-y:auto;">
<div style="width:1200px;height:800px;background-color:orange;">scrolling</div>
</div>
<div style="width:1200px;height:100px;background-color:green;">footer</div>
</div>
</div>
</body>
</html>
Unfortunately, with this HTML/CSS, an unwanted scrollbar appears on the div surrounding the inner content, which is located between content and footer, although overflow-x:visible; was set. When setting overflow-x:hidden; the scrollbar is gone, but then the vertical scrollbar is also scrolled by the horizontal scrollbar at the bottom instead of staying on the right of the page.
The behavior is mostly consistend in current IE/FF/Chrome versions. I also have a Javascipt version that fixes divs on window resize and on vertical scroll, but this flickers horribly in IE, which is why I'd prefer a pure CSS solution.
Here's a jsfiddle: http://jsfiddle.net/nftqjkyq/
Any ideas?
[edit: added more details about wanted behavior of the scrollbars]
<div style="width:100%;height:100px;background-color:green;">footer</div>
change the width of your footer to 100% if you want to remove the second scroll bar on your fiddle
Solved fiddle
http://jsfiddle.net/nftqjkyq/1/
EDIT
Try this one http://jsfiddle.net/nftqjkyq/4/
EDIT
With Sticky Footer that scrolls on overflow (This is impossible to scroll a fixed element using just css)
Here is a solution that could be closer to what you want.....maybe it can just give you the direction.
Try this fiddle: http://jsfiddle.net/nftqjkyq/10/
I am very new to Foundation but found it to be very useful.
I am making a horizontal scroller website.
I have a fixed top bar.
There have to be different background images after each scroll.
Different images have to be in different div, Its a 10 page website, so I have set the body height as 1000px and width as 12000px, I am not able to set properties of the div.
<div class="row">
<div id="home123" class="large-12 columns">
</div>
</div>
#home123{
background-color: red;
}
this isn't working.
Make one page whole div and give css properties and another whole page a div and give different css properties
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
i've got the next html:
<div id="container">
<div id="content"></div>
</div>
The container div is 1050px wide and includes only the shadow background that is repeated vertically.
The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.
What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?
overflow-x:hidden does not work.
Thx
http://jsfiddle.net/98Eqf/1/
I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.
http://jsfiddle.net/hobobne/98Eqf/2/