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!
Related
I am trying to do a project for my uni.
I would like to make a padding on my anchor to make them clickable.
#windows is a div that contains everything (maybe it could be substitute with a *?)
I chose the padding just with trying, but I'm not satisfied.
As you can see the logo is not centered because the padding changed the height of the banner (the grey part)
body {
margin: 0;
background-image: url("../img/background.png");
background-repeat: repeat;
}
#windows {
width: auto;
height: auto;
width: auto;
}
#banner {
height: 100%;
width: 100%;
background-image: url("../img/banner-background.png");
display: flex;
}
/*#banner p {
font-weight: bolder;
color: #1ea2c4;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
} */
#logo {
height: 50px;
width: 50px;
margin-left: 50%;
height: auto;
}
#logoutandcart {
margin-top: 1px;
margin-right: 30px;
margin-left: auto;
}
#logout,
#cart {
width: 50px;
margin-right: 5px;
width: fit-content;
float: right;
display: inline;
padding: 20px 5px 20px 5px;
}
<div id="window">
<div id="banner">
<div id="logo">
<a class="forwarder" href="home.php">
<img src=" ../img/nftlogo.png " alt="banner logo ">
</a>
</div>
<div id="logoutandcart">
<a class="conteiner" href="./login.php ">
<div id="logout">Log out
</div>
</a>
<a class="conteiner" href="./cart.php ">
<div id="cart">Carrello </div>
</a>
</div>
</div>
First lets discuss a few issues. If you use an ID of window then a selector of #windows your css will not work. Ensure that your ID and selectors always match. In this case it is ok because the width and height auto are not needed. Next there is no need to place a div inside of an a tag to contain your text. If you need to separate text in an a tag use a span. In this case it is not needed so Ill just remove it.
Next lets talk about a solution. You can use the header tag with a div inside that acts as a container. Place your banner background on the header tag and use the container to keep your banner centered when your screen becomes larger you can place a width on the container then use margin 0 auto to make it stay in the center and not go edge to edge. We can also make that container have a position of relative and a display of flex and control the space around the objects inside using the height. Align the items to the center and justify the content to the end of the flex object. This will only affect to two end links because we will do something different with the logo.
Since we always want the logo in the center we will give it a position of absolute. This will take it out of the "normal flow" of the document and allow us to place it where we want. In this case it will be to the top and left 50% of its closes relative parent the header-container. Then we will translate the object -50% of its height and width to center it within its parent.
Padding can then be added to the links on the right to separate them and make them a bit taller making them easier to click on.
Now you can change the height of your banner as you see fit and the objects inside will respond to their parents height and width.
body {
margin: 0;
}
.app-header {
background-color: #e6e6e6;
}
.header-container {
position: relative;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.link-container a {
padding: 20px 5px;
}
#media only screen and (min-width: 800px) {
.header-container {
width: 800px;
margin: 0 auto;
}
}
<header class="app-header">
<div class="header-container">
<a class="logo" href="home.php">
<img src="https://via.placeholder.com/50" alt="banner logo ">
</a>
<div class="link-container">
Log out
Carrello
</div>
</div>
</header>
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>
So lets imagine I have 6 div elements with different content.
3 divs are header
1 div is main container (scrollable)
last 2 divs are footer
How to make all of this scallable just with pure css? Because now when I'm resizing my browser my footer divs are just disappearing and I can't reach them and when I make my browser even smaller my main container div is cut in half (lower part disappears) and header divs height gets smaller
The best scenario would be to make header and footer divs somehow fixed height(don't know how) and main container to resize on broswer is resized.
html
<div ng-controller="ListController">
<div class="header">
</div>
<div class="price_found">
</div>
<div class="settings">
</div>
<div class="main_container antiscroll-wrap">
<div class="container antiscroll-inner">
</div>
</div>
<div class="total_select">
</div>
<div class="menu_footer">
</div>
</div>
scss
.cheap-watcher { //this is main container properties in which everything is injected
position: fixed;
top: 0px;
right: 0px;
width: 360px;
height: 100%;
max-width: 360px;
max-height: 100%;
min-height: 100%;
background-color: #f1f3f4;
float: right;
.header {
height: 7.57%;
background-color: #00a8e8;
}
.price_found {
padding-top: 16px;
height: 10.169%;
background-color: #fff;
text-align: center;
}
.settings {
height: 4.971%;
width: 100%;
display: inline-block;
}
.main_container {
width: 360px;
background-color: #fff;
.container {
width: 360px;
height: 57.856%;
}
}
.total_select {
height: 7.57%;
width: 100%;
background-color: #fff;
text-align: center;
border-top: solid;
border-top-color: #e8e8e8;
border-top-width: 2px;
}
.menu_footer {
height: 11.864%;
width: 100%;
}
}
You can assign to all of your containers a min-height for example in px or vh. Min. Height means that the container will always have that minimum height but will grow as more content comes in. For your main container you obviously want a fixed height, so use normal height and use also px or vh and overflow so if you have more content then the height allows, the main container becomes scrollable.
See a working Fiddle
Hope this helps you a bit.
I am working on a small site. To make it easier to read I pushed all the content of the site into the center with.
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
The problem is that the div follows this rule and is only in the very center.
In the footer class I tried resetting the margins and width by setting them back to 100% but that didn't work.
.footer {
width: 100%;
margin-left: 0%;
margin-right: 100%;
}
CodePen
Instead of setting the entire body to 500px width, create a div for your main content, and then place the footer underneath.
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
<body>
<div id="content">
<!-- Main page content here -->
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
Either place the .footer element outside of the wrapper element:
Example Here
In this case, use an element other than the body to function as the wrapper/container. I used an element with class .container:
.container {
width: 500px;
margin-left: auto;
margin-right: auto;
}
As an alternative, you could also absolutely position the .footer element and add left: 0; right: 0; in order for it take up the entire width of the page:
Example Here
.footer {
position: absolute;
left: 0;
right: 0;
}
Try moving the css from your body into a containing <div> and put all your content in that and have your footer below the containing <div> and if the element is unique use ids not class
e.g.
HTML:
<body>
<div id="mainContent">
<!-- Main site stuff here -->
</div>
<div id="footer">
<!-- footer info here-->
</div>
CSS:
body{
/*No CSS*/
}
#mainContent{
width: 500px;
margin-left: auto;
margin-right: auto;
}
#footer {
width: 100%;
margin: 0;
}
This is a quick mock-up to create a full-size webpage, however whenever I test this, a small margin of space is present at the top of the screen.
How can I get rid of this small space at the top?
HTML
<body>
<div id="container">
<header id="header">
<div class="header_container">
<h1 class="header_logo">Blog</h1>
<nav class="menu_nav">
</nav>
</div>
</header>
</div>
</body>
CSS
body,html {
margin: 0;
height: 100%;
}
#container{
height: 100%;
width: 100%;
background-color: orange;
}
#header {
width: 100%;
height: 80px;
background-color: green;
}
.header_container{
margin-left: 50px;
margin-right: 50px;
}
This is being caused by the margin on the top of the h1.
To fix this, either give the header a property of overflow:hidden to make the header taller, or remove the margin of the h1 using margin-top:0.
JSFiddle: http://jsfiddle.net/jdwire/8QV4f/