In my website i am using 12 image with scroll
My problem is when I try to scroll from the top it dosen't work. When pointer reach at specific height scroll starts
When i tried to decrease size of the browser it worked fine
Check my markup and css
Markup
<div class="ebroc">
<ul class="images">
<li><img/></li>
<li><img/></li>
<li><img/></li>
...
</ul>
</div>
CSS
ul.images {
margin: 0;
padding: 0;
width: 100%;
height: 40vw;
overflow-y: auto;
background-color: #ddd;
}
ul.images li {
display: block;
width: 100%;
height: 40vw;
margin-bottom: 10px;
}
ul.images li img {
height: 40vw;
width: 100%;
}
.ebroc {
margin-bottom: 20px;
width: 70vw;
}
Related
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target ÷ context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}
My problem is demonstrated in the following jsfiddle. It works fine in Chrome but not in Firefox:
https://jsfiddle.net/m0u175o8/1/
There should be no pink showing up on the right side, the area above the footer should be black (canvas).
I've got a footer at the bottom of the page. The height of the footer needs to be determined dynamically based on its contents. Above it sits a canvas that should take up the remaining portion of the screen. There are a couple of other panes like a header and a side bar. I included them in the jsfiddle but I'm not sure they have effect on the problem.
In actuality, the contents of my panes are laid out using bootstrap 3 so the jsfiddle imports bootstrap.
For reference, here is the HTML:
<div class="header">header<div>
<div class="left-pane">scrollable</div>
<div class="right-pane">
<div class="canvas-wrapper">
<canvas></canvas>
</div>
<div class="bottom-pane">dynamic <br> height <br> footer</div>
</div>
Here is my CSS:
body, html {
height: 100%;
color: white;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 20px;
background: green;
}
.left-pane {
position: relative;
float: left;
width: 25%;
margin-right: -75%;
height: 200vw;
background: blue;
z-index: 101;
}
.right-pane {
position: fixed;
top: 20px;
padding-bottom: 20px;
bottom: 0px;
width: 100%;
height: 100%;
padding-left: 25%;
float: left;
z-index: 100;
display: table;
background-color: pink;
}
.canvas-wrapper {
height: auto;
width: 100%;
display: table-row;
}
.bottom-pane {
height: 1px;
width: 100%;
background: red;
display: table-row;
}
canvas {
background: black;
width: 100%;
height: 100%;
}
I have a responsive layout that requires my image heights be constrained to the available window height (minus header). It works fine with just images in a <div>, but if the images are wrapped in an <a> tag the height is no longer constrained. Resizing the browser no longer has an effect on the image, even as it properly sizes the <a>.
How do I constrain the image height within the <a> tag so it doesn't just overflow? I'm using the jquery cycle2 plugin, so a CSS-only solution is strongly preferred to avoid conflicts.
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #CCC;
font-size: 1em;
margin: 0;
padding: 0;
}
header {
background-color: white;
height: 4.5em;
}
#content {
height: calc(100% - 72px);
max-height: 100%;
text-align: center;
}
#inner-content {
max-height: 100%;
height: 100%;
min-height: 100%;
}
.ps-slideshow-container {
background: red;
height: 100%;
}
.cycle-slideshow {
height: 100%;
max-height: calc(100% - 72px);
background: yellow;
position: relative;
}
.cycle-slideshow a {
width: auto;
height: auto;
max-height: 100%;
}
.cycle-slideshow a img {
width: auto;
height: auto;
max-height: calc(100% - 36px);
max-width: 100%;
display: block;
}
.ps-cycle-meta {
background-color: #999;
}
.wrap {
max-width: 960px;
margin: 0 auto;
}
<body>
<header>
<div id="inner-header" class="wrap">Resize does not work</div>
</header>
<div id="content">
<div id="inner-content" class="wrap">
<div class="ps-slideshow-container">
<div class="cycle-slideshow">
<img src="http://malsup.github.io/images/p1.jpg" alt="image1">
</div>
<div id="ps-cycle-nav-1" class="ps-cycle-nav ps-centered">PrevNext</div>
<div id="alt-caption" class="center ps-cycle-meta">Caption</div>
</div>
</div>
</div>
</body>
Working JSFiddle (just <img>)
Non-working JSFiddle (<a><img></a>)
.cycle-slideshow a {
display: block
}
you can't define a max-height for inline-block in this case.
If you set a height:auto property to your link, his height will takes the height of the image inside. So remove this property and set it a height to 100% to fill the container.
.cycle-slideshow a {
display: block;
width: auto;
height: 100%;
}
I am currently working on a HTML5 and CSS project and am having a problem getting the containers to display properly.
What I want to have is a header bar at the top, a wrapper that contains 2 other divs and then a footer at the bottom which is always at the bottom of the window or at the bottom of the content whichever is further down.
Here's a snippet:
html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
background-color: purple;
height: 100%;
width: 100%;
margin-top: 0px;
}
header
{
position: absolute;
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer
{
background-color: blue;
width: 75%;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 80px;
}
#articleContent
{
width: 70%;
background-color: yellow;
float: left;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
float: right;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
float: right;
height: auto;
}
<html>
<head>
<title>index</title>
<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="articleContainer">
Article Container
<div id="articleContent">
The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
</div>
<div id="articleSidebar">
Article Sidebar
</div>
</div>
</div>
</body>
</html>
At the moment the articleContainer is only the height of however many lines there are. What I want to have is the formContainer to fill the rest of the screen, I've tried adding the height: 100%; attribute but then this feels the form container over the screen size. I.e. a vertical scrollbar appears which is about the same height as the header. How can I get the formContainer to fill the available screen space without the scroll bar. However, if the content is larger than the form container should expand to fill the extra space.
Thanks for any help you can provide.
If you really want a css3 solution the one you're looking for is setting height: calc(100% - 80px); on #articleContainer as demonstrated in this fiddle, however this will not work in all browsers.
Example using old flexbox model css:
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-box;
-webkit-box-orient: vertical;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-box;
-webkit-box-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
same thing, but this time using new flexbox model
css
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-flex;
-webkit-flex-direction: column;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-flex;
-webkit-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
version with only the paragraph in yellow
I've used this method before, the tricky part is getting the header and footer in the right location. Once you have that the rest should fall into place:
jsfiddle:
http://jsfiddle.net/Ug5JR/
css:
html, body { margin: 0; padding: 0; height: 100%; }
header {
position: relative;
display: block;
background: red;
height: 100px;
z-index: 1;
}
article {
display: block;
background: yellow;
min-height: 100%;
margin-top: -100px;
margin-bottom: -100px;
}
article section {
display: block;
padding-top: 100px;
padding-bottom: 100px;
overflow: hidden;
}
footer{
display: block;
background: blue;
height: 100px;
}
p:hover {
height: 4000px;
}
markup:
<header></header>
<article>
<section>
<p>Hover me and I'll push the content larger than the page</p>
</section>
</article>
<footer></footer>
The trick is to get the negative margins to absorb the space used by the header and footer, this causes the 100% calculation to correct itself. You can then use any internal element to counter the negative margins with padding or margin on top and bottom. So whilst your article element is pretty much 100% height of the page, your article > section element will appear the right height and lay it's children out correctly.