My css is below. What I want is the header shall be fixed at top of the page and having width equal to the width of container irrespective to the changing width of browser. However, I always get the width of header expands over the width of Container. Please instruct me how to fix it?
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
display: grid;
grid-template-columms: auto auto;
grid-template-rows: 170px 60px;
position: fixed;
top: 0px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Set the width of the header to 80%;
Works automatically..
* {
margin:0;
padding:0;
}
.container {
width: 80%;
margin: auto;
border: 1px solid red;
height: 150vh;
}
header {
background: green;
position: fixed;
width: 80%;
top: 0;
height: 50px;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Codepen Demo
Related
So... How I do something like this with CSS only? Watch red element, it scales not scrolls:
Currently it works via JS, I catch onscroll and update size of the element according to calculated free space.
This is how it works now:
https://codepen.io/bswan-the-decoder/pen/OJPVxZj
<div class="header">
Header
</div>
<div class="header-spacer">
</div>
<div class="content">
<div class="sidebar">
</div>
<div class="page">
</div>
</div>
<div class="footer">
Footer
</div>
body {
background-color: black;
}
.header {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
min-height: 80px;
background-color: #FFF;
z-index: 500;
}
.footer {
min-height: 50px;
bottom: 0px;
background-color: #FFF;
left: 0px;
}
.page {
min-height: 1000px;
width: 50%;
margin: 15px;
margin-left: auto;
margin-right: auto;
background-color: #AAA;
}
.sidebar {
position: fixed;
background-color: #F66;
left: 10px;
top: 105px;
width: 100px;
height: 200px;
}
let header = document.querySelector('.header');
let footer = document.querySelector('.footer');
let sidebar = document.querySelector('.sidebar');
let header_spacer = document.querySelector('.header-spacer');
header_spacer.style.height = header.clientHeight+'px';
document.addEventListener('scroll',(event)=>{
let height = window.innerHeight - header.clientHeight - 35;
let scroll = this.scrollY;
if(scroll+window.innerHeight+footer.clientHeight>=document.body.clientHeight)
{
height = (height - (
(scroll+window.innerHeight+footer.clientHeight)
- document.body.clientHeight));
}
sidebar.style.height = height+'px';
});
This my new layout:
https://codepen.io/bswan-the-decoder/pen/wvBapvV
<body>
<div class="header">
</div>
<div class="content">
<div class="sidebar_holder">
<div class="sidebar"></div>
</div>
<div class="page_holder">
<div class="page"></div>
</div>
</div>
<div class="footer">
</div>
</body>
body{
display: grid;
grid-template-rows: min-content auto min-content;
grid-template-columns: auto;
grid-template-areas: "header" "content" "footer";
background-color: #000;
min-height: 100vh;
}
.header{
grid-area: header;
background-color: #FFF;
min-height: 80px;
position: sticky;
top: 0px;
z-index: 5;
}
.footer{
grid-area: footer;
background-color: #FFF;
min-height: 40px;
}
.content{
grid-area: content;
display: grid;
grid-template-rows: auto;
grid-template-columns: min-content auto;
grid-template-areas: "sidebar page";
}
.sidebar_holder {
grid-area: sidebar;
}
.page_holder {
grid-area: page;
}
.sidebar {
width: 100px;
position: sticky;
top: 105px; /*how to make it (header height+20px) ?*/
height: 100px; /*How to make it (100vh - header height - visible height of footer)?*/
background-color: #F66;
}
.page {
height: 1000px;
width: 50%;
background-color: #AAA;
margin: 25px;
margin-left:auto;
margin-right:auto;
}
Update:
#Roddy - I tried but my knowledge is lacking so there was nothing of use pruduced by me.
To fill out the whole space with a div, you can use ViewHeight and ViewWidth units like:
vw and vh takes the percentage of the screensize and applies it,
100vw means 100% of the width
.whole-area {
height: 100vh;
width: 100vw;
background: orange;
}
<div class="whole-area">
<span>Text</span>
</div>
How can I make all the images the same size while having them still be responsive?
Here's the fiddle:
https://jsfiddle.net/2ko9g725/2/
This is all the css:
.ui.text.menu {
background-color: #eee;
margin-top: 0;
}
.ui.message {
padding: 50px 50px;
margin-bottom: 20px !important;
}
.ui.grid.stackable.container {
display: flex;
flex-wrap: wrap;
}
Check this Demo. It may help you
CSS
img.ui.image{
max-width: 100%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
.ui.segment {
width: 100%;
}
Check this fiddle. You can put a wrapper div inside your ui segments for your image to sit in, then give that wrapper a height and width then add object-fit: cover to the img element in css with a width and height of 100%.
body {
margin: 0;
display: flex;
}
.segment {
width: 30%;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.seg-img {
height: 80%;
width: 100%;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
i have just updated the fiddle with
images stretch on smaller viewports have been fixed
check this fiddle
i have just changed only in the css
img.ui.image{
overflow: hidden;
width: 100%;
max-width: 50%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.