Given some very basic html using flexbox, I can achive a screen with a header, footer and a content area that fills all the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
Header displays at top, footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, if I try to achieve the same thing within Aurelia (using the webpack starter kit) the grow seems to be ignored on both the body and the content elements.
index.ejs -- comes with starter kit I added styling to original file
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes to original starter kit file
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also tried adding flex to <template style="display:flex;flex-direction:column;flex-grow:1">
Everything looks good when you inspect the page -- in fact, looks almost exactly like the basic html example. However, the body and the div containing the Content Area do not grow to fill the height of the page.
I tried to get an example working in Plnkr but it actually has the same problem as Aurelia. I noticed that it is using shadow element just like Aurelia does -- I'm guessing that may have something to do with it?
For it to work with Aurelia (or alone), you should layout the markup like this
<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
<my-template style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;">Header</div>
<div style="display:flex;flex-grow:1">Content Area</div>
<div style="display:flex;">Footer</div>
</my-template>
</body>
where the <template>, if it gets rendered, needs to be <my-template> for it to work, as the <template> tag has a special meaning and won't render visually, see MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Then the body (or any main element) needs a height, and here I used height:100vh.
Also do note, the flex-grow you had on the <body> won't apply if not its parent, the <html> also has display: flex
Related
Is there a way to set the height of a div using only CSS so it will fill out the reminder of the page height?
I have very limited control over the webpage (a client's custom framework), and it's not possible to change any html or use javascript.
Basically I have a textbox where I can write CSS, and that's it.
Also, I can't make fundamental changes(like introducing flex or anything like that) since it would break the page/site.
The site don't use any media queries or define viewports or anything like that. Basically they use HTML 3.2. It's an ASP.NET WebForms site where the core parts were built around 2002 - 2005.
...
<body>
...
<div id="rowContainer"> <!-- This is the div that needs to go all the way down to the very end
of the entire page.
(NOTE: NOT the end of the visible part of the page) -->
<!-- child elements consist of hierarchy of divs
(but are row based, the content of a "row" is undefined),
which use a mixture of relative, absolute and fixed positioning.
They are dynamically generated and they are "undefined",
so no assumptions can be made about the child nodes -->
<div css="row" > ... </div> <!-- These child divs might all be
absolutely positioned -->
<div css="row" > ... </div>
<div css="row" > <!-- row content is undefined and can change at any time --> </div>
<div css="row" > ... </div>
</div> <!-- There are no other visible elements after the "rowContainer" -->
</body>
use
#rowContainer{
height:100vh;
}
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
How can I maximize the size of the div that plays the role of "content"?
I recognize that this may simply be a basic CSS question, but it feels like it is tied to CSS in jQueryMobile.
I'm placing a Google Map in the content div and I'd like the map to fill the available verticle space on the mobile browser. Instead, it's a fixed size of about 10px (give or take).
<div data-role="page">
<div data-role="header" class="ui-header ui-bar-a">Header</div>
<div data-role="content" class="ui-body ui-content">
<div id="divMap">google map via javascript</div>
</div>
<div data-role="footer">footer</div>
In this case, jQueryMobile always creates the minimal size for its contents, and I always want it to be 80% of the available page.
You could probably use jQuery (I haven't worked with jQuery mobile, though, so this might not work directly):
$(document).ready(
function(){
$('#content').height($(window).height()*0.8);
}
);
JS Fiddle demo