azyobuzin · December 17, 2017 05:47
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>プロジェクト名</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #top-container {
                position: absolute;
                width: 100%;
                height: 75%;
            }
            #source-tab {
                margin: 0;
                padding: 0;
                list-style-type: none;
                cursor: default;
                position: relative;
                background-color: #eeeef2;
            }
            #source-tab:after {
                display: block;
                content: "";
                clear: left;
                border-top: solid 2px #007acc;
            }
            #source-tab li {
                float: left;
                padding: 6px;
            }
            #source-tab li:hover {
                background-color: #1c97ea;
                color: white;
            }
            #source-tab .active, #source-tab .active:hover {
                background-color: #007acc;
                color: white;
            }
            #source-container {
                background-color: white;
                position: relative;
                width: 100%;
                overflow: hidden;
            }
            #source-container:after {
                display: block;
                content: "";
                clear: both;
            }
            #source-container pre {
                margin: 0;
                font-family: Consolas, monospace;
            }
            #line-numbers {
                padding: 6px;
                width: 3em;
                float: left;
                text-align: right;
                background-color: white;
                overflow: hidden;
                cursor: default;
            }
            #source-scroller {
                height: 100%;
                overflow: scroll;
            }
            #source {
                padding: 6px 6px 6px 2em;
            }
            #bottom-container {
                position: absolute;
                width: 100%;
                height: 25%;
                bottom: 0;
                background-color: #eeeef2;
            }
        </style>
        <script>
            var elmTopContainer, elmSourceTab, elmSourceContainer,
                elmLineNumbers, elmSourceScroller, elmSource, elmBottomContainer;

            function init() {
                elmTopContainer = document.getElementById("top-container");
                elmSourceTab = document.getElementById("source-tab");
                elmSourceContainer = document.getElementById("source-container");
                elmLineNumbers = document.getElementById("line-numbers");
                elmSourceScroller = document.getElementById("source-scroller");
                elmSource = document.getElementById("source");
                elmBottomContainer = document.getElementById("bottom-container");

                window.addEventListener("resize", updateTopContainerSize, false);
                elmSourceScroller.addEventListener("scroll", updateLineNumbersStyle, false);

                updateTopContainerSize();
            }

            function setHeight(elm, h) {
                elm.style.height = Number(h) + "px";
            }

            function setMinHeight(elm, h) {
                elm.style.minHeight = Number(h) + "px";
            }

            function updateTopContainerSize() {
                var windowHeight = window.innerHeight;

                var bottomContainerMaxHeight = windowHeight - 10;
                var bottomContainerHeight = elmBottomContainer.offsetHeight;
                if (bottomContainerHeight > bottomContainerMaxHeight) {
                    bottomContainerHeight = bottomContainerMaxHeight;
                    setHeight(elmBottomContainer, bottomContainerHeight);
                }

                setHeight(elmTopContainer, windowHeight - bottomContainerHeight);

                setHeight(elmSourceContainer, Math.max(0,
                    windowHeight - bottomContainerHeight - elmSourceTab.offsetHeight));

                updateLineNumbersStyle();
            }

            function updateLineNumbersStyle() {
                elmLineNumbers.style.marginTop = (-elmSourceScroller.scrollTop) + "px";
            }
        </script>
    </head>
    <body>
        <div id="top-container">
            <ul id="source-tab">
                <li class="active">File1.cs</li>
                <li>File2.cs</li>
            </ul>
            <div id="source-container">
                <pre id="line-numbers">1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 </pre>
                <div id="source-scroller">
                    <pre id="source">using System;
 public static class Program {
    public static void Main(string[] args) { Console.WriteLine("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"); }








































 b</pre>
                </div>
            </div>
        </div>
        <div id="bottom-container">
            a
        </div>

        <script>init();</script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>プロジェクト名</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#top-container {
	position: absolute;
	width: 100%;
	height: 75%;
	}
	#source-tab {
	margin: 0;
	padding: 0;
	list-style-type: none;
	cursor: default;
	position: relative;
	background-color: #eeeef2;
	}
	#source-tab:after {
	display: block;
	content: "";
	clear: left;
	border-top: solid 2px #007acc;
	}
	#source-tab li {
	float: left;
	padding: 6px;
	}
	#source-tab li:hover {
	background-color: #1c97ea;
	color: white;
	}
	#source-tab .active, #source-tab .active:hover {
	background-color: #007acc;
	color: white;
	}
	#source-container {
	background-color: white;
	position: relative;
	width: 100%;
	overflow: hidden;
	}
	#source-container:after {
	display: block;
	content: "";
	clear: both;
	}
	#source-container pre {
	margin: 0;
	font-family: Consolas, monospace;
	}
	#line-numbers {
	padding: 6px;
	width: 3em;
	float: left;
	text-align: right;
	background-color: white;
	overflow: hidden;
	cursor: default;
	}
	#source-scroller {
	height: 100%;
	overflow: scroll;
	}
	#source {
	padding: 6px 6px 6px 2em;
	}
	#bottom-container {
	position: absolute;
	width: 100%;
	height: 25%;
	bottom: 0;
	background-color: #eeeef2;
	}
	</style>
	<script>
	var elmTopContainer, elmSourceTab, elmSourceContainer,
	elmLineNumbers, elmSourceScroller, elmSource, elmBottomContainer;

	function init() {
	elmTopContainer = document.getElementById("top-container");
	elmSourceTab = document.getElementById("source-tab");
	elmSourceContainer = document.getElementById("source-container");
	elmLineNumbers = document.getElementById("line-numbers");
	elmSourceScroller = document.getElementById("source-scroller");
	elmSource = document.getElementById("source");
	elmBottomContainer = document.getElementById("bottom-container");

	window.addEventListener("resize", updateTopContainerSize, false);
	elmSourceScroller.addEventListener("scroll", updateLineNumbersStyle, false);

	updateTopContainerSize();
	}

	function setHeight(elm, h) {
	elm.style.height = Number(h) + "px";
	}

	function setMinHeight(elm, h) {
	elm.style.minHeight = Number(h) + "px";
	}

	function updateTopContainerSize() {
	var windowHeight = window.innerHeight;

	var bottomContainerMaxHeight = windowHeight - 10;
	var bottomContainerHeight = elmBottomContainer.offsetHeight;
	if (bottomContainerHeight > bottomContainerMaxHeight) {
	bottomContainerHeight = bottomContainerMaxHeight;
	setHeight(elmBottomContainer, bottomContainerHeight);
	}

	setHeight(elmTopContainer, windowHeight - bottomContainerHeight);

	setHeight(elmSourceContainer, Math.max(0,
	windowHeight - bottomContainerHeight - elmSourceTab.offsetHeight));

	updateLineNumbersStyle();
	}

	function updateLineNumbersStyle() {
	elmLineNumbers.style.marginTop = (-elmSourceScroller.scrollTop) + "px";
	}
	</script>
	</head>
	<body>
	<div id="top-container">
	<ul id="source-tab">
	<li class="active">File1.cs</li>
	<li>File2.cs</li>
	</ul>
	<div id="source-container">
	<pre id="line-numbers">1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13
	14
	15
	16
	17
	18
	19
	20
	21
	22
	23
	24
	25
	26
	27
	28
	29
	30
	31
	32
	33
	34
	35
	36
	37
	38
	39
	40
	41
	42
	43
	44
	</pre>
	<div id="source-scroller">
	<pre id="source">using System;
	public static class Program {
	public static void Main(string[] args) { Console.WriteLine("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"); }








































	b</pre>
	</div>
	</div>
	</div>
	<div id="bottom-container">
	a
	</div>

	<script>init();</script>
	</body>
	</html>