Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (65 sloc) 2.38 KB
<!DOCTYPE html>
<html>
<head>
<!-- Stylesheet References -->
<!-- <link rel="stylesheet" type="text/css" href="/path/to/css/file/here" /> -->
<!-- JavaScript References -->
<!-- <script type="text/javascript" src="/path/to/js/file/here" /> -->
<style type="text/css">
html, body {
/*
* In order for the two nested divs to have the intended height (50% each),
* BOTH the html and body tags must have their height set to 100%. Otherwise, the
* height over everything collapses.
*/
height: 100%;
/*
* Whenever I'm doing a splitter pane arrangement, I always set overflow: hidden;
* otherwise I always seem to get scrollbars. I've never really figured out why
* the browsers give me scrollbars, but overflow: hidden; always seems to be a good
* idea when doing split panes. That way if you're calculations are off by a pixel or
* two it doesn't matter.
*/
overflow: hidden;
margin: 5px;
padding: 0;
border: 0;
box-sizing: border-box;
}
div.pane {
/* Note: When using border-box, the size of the box includes the border and the
padding, but not the margin, so we have to subtract off the margins */
height: calc(50% - 10px);
border-collapse: collapse;
box-sizing: border-box;
padding: 5px;
}
div.pane-top {
/*
* If you don't want a 50/50 arrangement, remove the height setting from div.pane
* and set each pane independently. Subtract off the margins in both panes.
*/
/* height: calc(30% - 10px); */
border: 1px solid black;
}
div.pane-bottom {
/*
* If you don't want a 50/50 arrangement, remove the height setting from div.pane
* and set each pane independently. Subtract off the margins in both panes.
*/
/* height: calc(70% - 10px); */
/* I tried using border-collapse: collapse; but that seems to only work for tables */
border: 1px solid black;
border-top-width: 0;
}
</style>
</head>
<body>
<div class="pane pane-top">
Top Pane Here
</div>
<div class="pane pane-bottom">
Bottom Pane Here
</div>
</body>
</html>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.