I am a newbie to html style, and I want to make a top nav bar like this site(stackoverflow.com) that will be 100% width and on top of the browser. Here is what I tried:
<style>
body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
.navbar-default {
background-color: #497093;
border-color: #3e5f7d;
}
#nav-bar{
width:100% !important; <-- here I make the nav-bar 100% width.
float:left;
}
</style>
But it will still fixed as 80% width :-(
How can I make this work?
Here is the snippet of html
<body class="wrapper">
<div class="navbar navbar-default navbar-static-top" role="navigation" id="nav-bar">
</div>
...
...
</body>
Just looked at the image and it is as my comment said. You have your nav inside your wrapper. Move it outside and it will be 100% width of the window.
It was 100% of the parent (wrapper) and the parent had 80% width.
Edit
In your case you have a class on body so any child element will be scaled from 80% width. I would recommend wrapping the content in a div and moving the nav outside of that wrapper.
body {
margin: 0;
}
.nav {
background: red;
}
.wrapper {
width: 80%;
margin: 0 auto;
background: #999;
}
<div class="nav">We can go 100%!</div>
<div class="wrapper">
Content Here
</div>
Related
I want #f8f8f8 to extend until the bottom of the page. I tried adding height: 100%; to .tab-content but nothing happened.
Any suggestions?
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.tab-container {
color: #fff;
background: #000;
}
.tab-content {
background: #f8f8f8;
height: 100%; /* doesn't work */
}
<div class="vreditor-sdk">
<div class="building">
<div class="header"></div>
<div class="i-tab">
<div class="tab-container">
</div>
<div class="tab-content">
Test
</div>
</div>
</div>
</div>
In css when you give height as percentage, it will take that percentage of parent height.
Giving height: 100%; to .tab-content means it takes 100% height of .itab not the page. So if you want your .tab-content to cover whole page, your .itab needs to cover the whole page first. Same happens with every direct parent until you reach html element.
So your fix should be
html, body, .vreditor-sdk, .building, .itab, .tab-content {
height: 100%:
}
html takes 100% height of the page, body takes 100% height of html which is same as page height and so on...
This is how your page height reaches your .tab-content
put background -color property in i-tab class
.i-tab {
background-color: #f8f8f8;
}
and remove it from tab-content class.
I'm trying to make the <body> element take up at least 100% height of the browser window but also expand to any content. I'm also trying to make its only <div> child element take up 100% of the <body> height as well.
Illustration
This is what is currently happening; Case A is the problem, Case B works as expected.
In Case A, the div.page-content (red box) should expand to the body (blue box), but it does not.
Code
Here's what I have.
CSS
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 57px;
}
.page-content {
height: 100%;
}
Html
<html>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-content">
<div class="page-container"></div>
</div>
</body>
</html>
Note that the nav element is statically positioned and thus doesn't affect layout.
Body doesn't have a height specified because I want to height to be auto so it stretches to the content, but I don't want the height to be less than the browser window.
Body behaves as expected, it's the div.page-content that is only sizing to its own contents instead of stretching to the height of the body.
Is there a way to achieve the desired behavior without using javascript?
add overflow:visible; to body, change min-height:100%; to height:100%; for body and height:100%; to min-height:100%; for .page-content
skip page-content and use body as the main container, so you skip the inheritance trouble your are facing.
example
* {
box-sizing: border-box
}
html {
padding-top: 50px;
height: 100%;
background: white;
}
body {
min-height: 100%;
background: turquoise;
margin: 0 2em;
border:solid; /* see me */
}
nav {
position: fixed;
height: 50px;
top: 0;
left: 2em;
right: 2em;
background: tomato;
}
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-container"></div>
i try to create div footer, but have problem.
I have few div blocks located one by one inside container.
Container have 100% height.
Inside Container First Div have 100px height (header).
Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.
Third Div have absolute position and located on bottom.
But summary height of Container Div is more than 100% because i see scroll on right part of page.
How to resolve this?
Page with css: height:100% takes more than 100%
html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}
.container {
position:relative;
min-height:100%;
background-color: green;
}
.header {
background-color: blue;
height: 100px;
}
.mainbody {
background-color: gray;
height: 100px;
}
.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>
Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set
.container{ height:100%}
rather than
min-height:100%
as it will exceed the page full size.
You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)
A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.
It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.
html, body {
height: 100%;
margin: 0;
padding: 0;
margin-top: -8px;
background-color: yellow;
}
I'm trying to set the "Nelson Mazda" png to fit within the limits of the navbar, but it's showing larger than the navbar as you can see in the screenshot. I tried setting the max-height and max-width of .brand-logo to 100%, but this doesn't seem to be fixing it. What am I missing?
Note: nav-wrapper is set to the same height as the navbar, so setting .brand-logo's height to 100% of it should theoretically work, right?
HTML:
<!-- Navigation bar -->
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<span class="tighter"><img src="images/NelsonMazdaLogo.png">
</div>
</nav>
</div>
CSS:
nav {
background-color: rgba(255, 255, 255, .95);
.brand-logo,
ul a {
color: $black;
padding: 0 15px;
}
.brand-logo {
font-weight: 400;
letter-spacing: -2px;
height: 100%;
max-width: 100%;
.tighter {
letter-spacing: -3px;
}
}
}
set max-height and max-width on the img itself
.brand-logo img {
max-height:100%;
max-width:100%;
}
Your outer nav has to have a height or width.
See these examples:
http://codepen.io/bootstrapped/details/KwYGwq/
.brand-logo {
height: 50px; /* set to height you want image to be constrained to */
}
.brand-logo img {
height:100%;
width:auto;
}
Plus you have a random span tag that isn't closed.
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<a href="/" class="brand-logo">
<span class="tighter"><img src="images/NelsonMazdaLogo.png"></span><!-- missing closing span tag -->
</a>
</div>
</nav>
</div>
The key thing to think about is when you say 100% you have to think, 100% of what exactly? It needs to be inside a parent or grandparent element that has an actual height.
Also if your image itself wasn't cropped properly it could be adding transparent space around the logo. If the above solution doesn't work, try downloading your image and cropping it to make sure it's actually cropped to the logo edges.
You can also try object-fit:
object-fit: contain;
width: 100%;
I'm developing a little website and I'm facing some troubles.
What I want is to resize a "row" div with a particular height, in percentage.
I've already searched on SO but nothing was good for me.
Here is my code:
<body>
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
<!-- END NAVBAR -->
<div class="container-fluid">
<div class="row row-first">
<img class="img img-responsive" src="public/img/bg.jpg" />
</div>
</div>
class "row-first" for now has no rules so it not take effect.
I want that "row-first" div is 80% of the viewport's height, but the only way to resize it is by putting some content inside the div so that the div's height follows content height.
my CSS:
html {
height: 100%;
}
body {
height: 100%;
}
body {
font-family: 'Muli', sans-serif;
}
.container-fluid {
max-height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.row {
margin-left: 0px;
margin-right: 0px;
height:80%;
}
.row-first {
}
The height of the div is relative to the height of the parent. Therefor, to make the height of .row 80%, I first set the height of the parent. Here's the css:
.container-fluid {
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.row-first {
height:80%;
overflow: hidden;
}
And the fiddle: http://jsfiddle.net/bmwoLkdr/
Feel free to play with the height and see for yourself!