###前提・実現したいこと
HTML+CSS+javascriptで個人的な備忘録サイトを作ろうと考えています。
イメージはjavaAPIのWebページ、そのまま同じ構成+動作です。
リンク内容
【動作イメージ】
1.大項目(左上のフレーム内のリンク)を押下
2.中項目(左下のフレーム内のページ)を更新
3.中項目(左下のフレーム内のリンク)を押下
4.小項目(右部のフレーム内のページ)を更新
現状、Cssだけでiframeを使用せず体裁だけ整えています。
JavaAPIのページではインラインフレームタグを使用して実現している様ですが、今はフレームをあまり使わない、という情報を見て、鵜呑みにしてしまい<nav>と<section>で分け、Cssで体裁を整えています。
現状、上記「動作イメージ」と同じ動きを実現する事ができません。
そもそもHTMLの基本的な動作を理解していない事が原因だとは思いますが、インラインフレームを使わずにCSSやJavascriptだけで同じ動作をさせる事は可能でしょうか?
インラインフレームを使いたくない特別な理由がる訳ではありませんが、下記のソースコード程度を作るのに時間が掛かるレベルなので、なかなか捨てがたいのです…
低レベルな質問で恐縮ですが、どうぞ宜しくお願いします。
###該当のソースコード(HTML)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function () { adjust(); }); $(window).resize(function () { adjust(); }); function adjust() { var h = $(window).height(); var h1 = $('header').outerHeight(true); var h2 = $('footer').outerHeight(true); var h3 = $('nav#main').outerHeight(true); $('nav#sub').css("top", h1 + h3 - 2); $('nav#sub').css("height", h - (h1 + h2 + h3)); $('section').css("height", h - h1); } </script> </head> <body> <header> <h1> ヘッダー </h1> </header> <section> <article> <h2>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</h2> </article> </section> <nav id=main> <ul> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> </ul> </nav> <nav id=sub> <ul> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">BBBB</a></li> </ul> </nav> <!-- <footer> <h1></h1> Copyright © 2016 **** All Rights Reserved </footer> --> </body> </html>
###該当のソースコード(CSS)
html { display: block; height: 100%; width: 100%; overflow: hidden; } body { display: block; position: absolute; width: 100%; height: 100%; margin: 0px; padding: 0px; font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; } header { display: inline-block; position: fixed !important; top: 0; left: 0; width: 100%; height: 35px; background-color: #eee; font-size: 8px; color: #666; line-height: 16px; padding: 2px 4px; right: 0px; text-shadow: 1px 1px #fff; } section { display: inline-block; position: absolute; overflow-y: scroll; border: 1px solid #ccc; top: 38px; left: 201px; width: auto; margin: 0px; padding: 0px; } nav#main { display: inline-block; position: fixed; border: 1px solid #ccc; max-height: 270px; top: 38px; left: 0px; width: 200px; max-height: 270px; margin: 0px; padding: 0px; overflow: auto; } nav#sub { display: inline-block; position: fixed; border: 1px solid #ccc; top: 315px; left: 0px; width: 200px; margin: 0px; padding: 0px; overflow: auto; } /* footer h1 { display: inline-block; visibility: hidden; position: fixed; border: 1px solid #ccc; background-color: #eee; bottom: 0px; left: 0px; width: 100%; height: 20px; color: #666; margin: 0px 0px; font-size: 12px; }*/
回答1件
あなたの回答
tips
プレビュー