デモページ 関連する記事 下半分がスクロールするページ【 height: calc( 100% - 120px ) 】
<!DOCTYPE html> <html> <head> <meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport"> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section-iframe.css"> </head> <body> <div id="head"> </div> <iframe id="extend" name="extend" class="iframe-option" src="/demo/template/basic/basic-php-iframe-req/req/control.php"></iframe> </body> </html>
two-section-iframe.css
@charset utf-8;
/* ****************************
上下エリア
フィットコントロール用
******************************/
html,body {
height: 100%;
}
/* ****************************
それぞれのエリアの特性
******************************/
/* 基本枠 */
body {
margin: 0;
}
/* 上固定部分 */
#head {
padding: 16px;
display: block;
margin: auto;
width: 100%; /* 幅 */
height: 120px; /* 高さ */
background-color: #e0e0e0;
}
/* 下スクロール部分 */
#extend {
display: block;
margin: auto;
width: calc( 100% - 3px ); /* 幅 */
height: calc( 100% - 120px - 2px ); /* 高さ */
border: solid 2px #c0c0c0;
}
|
|
