All geek questions in one place

CSS style mockup using CSS

What is the best way (using HTML / CSS) to create an iTunes-style layout with the following features:

  • left column with fixed width but liquid height (scroll bars for overflow) (BLUE below)
  • main column of content with the width and height of the liquid (scroll bars for overflow) (red below)
  • bottom right box with fixed width and height that stays stuck at the bottom of the browser? (GREEN below)

Here is an example:

iTunes layout example as described above

I am happy to use Javascript / JQuery if there really isn’t a clean CSS solution.

Thank!

+3
source share
3 answers

http://fiddle.jshell.net/RAkKN/show/:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
body {
	margin: 0;
	padding: 0;
}
div {
	opacity: 0.5;
}
#red { background: red; }
#green { background: lime; }
#blue { background: blue; }
#green, 
#blue {
	width: 200px;
	position: fixed;
	left: 0;
}
#green {
	bottom: 0;
	height: 200px;
}
#blue {
	bottom: 200px;
	top: 0;
	overflow: auto;
}
#red {
	margin: 0 0 0 200px;
}
span { /* force overflow, for example */
	display: block;
	height: 3000px;
}
		</style>
	</head>
	<body>
		<div id="blue">
			<span></span>
		</div>
		<div id="green"></div>
		<div id="red">
			<span></span>
		</div>
	</body>
</html>

IE6; , IE6 ( JavaScript), , , JavaScript.

+2

ExtJs .

, .

0

... - psudeo-css ( IRL, #left #right [ javascript]).

html, body{height:100%;width:100%;margin:0;padding:0;}
    .clearfix{/****the usual clearfix code****/}
        #left {height:100%;float:left;width:25%;}
            #top{height:75%;overflow:auto;}
            #bottom{height:25%;}
        #right {height:100%;width:75%;float:left;overflow:auto;}

, ... !

-

, , javascript.

-1

Source: https://habr.com/ru/post/1744165/

More articles:


All Articles