CODEWITHSUNDEEP
csshtml
togarha
togarha

Reputation: 175

Div height works on firefox but not on chrome

I have a problem with visualitation between Firefox and Chrome and I don't know why, I try some things but it works fine in firefox, but height size of article don't work as I expected:

	*{
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	body, html{
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	#main {
	   height: 80%;
	   display: -webkit-flex;
	   display:         flex;
	   flex-flow: row;
	}
	#main section {
		background: #CFC;
		flex: 3 1 60%;
		order: 2;
	}
	#main nav {
		background: #CCF;
		flex: 1 6 20%;
		order: 1;
	}
	#main aside {
		background: #CCF;
		flex: 1 6 20%;
		order: 3;
	}
	header, footer {
		display: block;
		min-height: 10%;
		background: #FC6;
	}
	#header, #footer {
		display: block;
		min-height: 10%;
		background: #CCC;
	}
	#article{
		display: block;
		height:80%;
	}
	#content{
		height:100%;
		width: 100%;
		background: #FFF;
	}
		<header>&lt;header&gt;
		</header>
		<div id="main">
			<nav>&lt;nav&gt;
			</nav>
			<section>
				<div id="content">
					<div id="header">&lt;header&gt;
					</div>
					<div id="article">&lt;article&gt;
					</div>
					<div id="footer">&lt;footer&gt;
					</div>
				</div>
			</section>
			<aside>&lt;aside&gt;
			</aside>
		</div>
		<footer>&lt;footer&gt;
		</footer>

Upvotes: 0

Views: 635

Answers (1)

Alohci
Alohci

Reputation: 82976

Just add height:100% to #main section like this:

    *{
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	body, html{
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	#main {
	   height: 80%;
	   display: -webkit-flex;
	   display:         flex;
	   flex-flow: row;
	}
	#main section {
		background: #CFC;
		flex: 3 1 60%;
		order: 2;
		height:100%;
	}
	#main nav {
		background: #CCF;
		flex: 1 6 20%;
		order: 1;
	}
	#main aside {
		background: #CCF;
		flex: 1 6 20%;
		order: 3;
	}
	header, footer {
		display: block;
		min-height: 10%;
		background: #FC6;
	}
	#header, #footer {
		display: block;
		min-height: 10%;
		background: #CCC;
	}
	#article{
		display: block;
		height:80%;
	}
	#content{
		height:100%;
		width: 100%;
		background: #FFF;
	}
		<header>&lt;header&gt;
		</header>
		<div id="main">
			<nav>&lt;nav&gt;
			</nav>
			<section>
				<div id="content">
					<div id="header">&lt;header&gt;
					</div>
					<div id="article">&lt;article&gt;
					</div>
					<div id="footer">&lt;footer&gt;
					</div>
				</div>
			</section>
			<aside>&lt;aside&gt;
			</aside>
		</div>
		<footer>&lt;footer&gt;
		</footer>

Upvotes: 1

Related Questions