3

私は自分のウェブページの画像を投稿し、それに適用する html コードと CSS も投稿しました。

#main がそれぞれのラップトップの解像度としてページに固定の高さで表示されるようにしたいと考えています。では、どのくらいのサイズを与えればよいのでしょうか。私が得ているもう1つの問題は、高さを与えようとすると、それが適用されないことです。#main にもフッターが含まれています。CSS にこれを適用するには、どのような変更が必要ですか? 私の #main は、コンテンツをロードすると高さが拡大します。しかし、その高さを固定する必要があります。

ここに画像の説明を入力

HTML

<html>
<head>
<title> Index </title>
        <link type="text/css" rel="stylesheet" href="../Content/Site.css">
        <script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js">
        <script type="text/javascript" src="../../Scripts/jquery.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js">
        <script type="text/javascript" src="../../Scripts/modernizr-1.7.min.js">
        <link type="text/css" rel="stylesheet" href="../Content/menu.css">
        <script type="text/javascript" src="../../Scripts/menu.js">
</head>

<body>
<div class="page">
     <header>
        <table id="header">
        <div id="menu">
        <ul class="menu">
        <li class="current">
        <li>
        <a href="/CRMDashboard/Dashboard">
        </li>
        <li>
        <a class="parent" href="/CRM/Index">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a href="/FilterCRMRequest/Index">
        </li>
        <li>
        <a href="#">
        </li>
        <li class="back" style="left: 30px; width: 100px; display: block; overflow: hidden;">
        <div class="left"></div>
        </li>
        </ul>
        </div>
    </header>
<section id="main">
    <h2>Index</h2>
        <footer>
                <hr>
                <p> Copyright (c) 2012 </p>
                <hr>
        </footer>
</section>

</div>
</body>
</html>

CSS

body {
    background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9);
    color: #000000;
    font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
    font-size: 0.85em;
    height: 100%;
    margin: 0;
    padding: 0;
}


.page {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}

header, #header {
    border: 0 none;
    color: #000000;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}
header, footer, nav, section {
    display: block;
}

header, #header {
    color: #000000;
}

#main {
     padding: 30px 30px 15px;
background-color: #fff;
border-radius: 4px 4px 4px 4px;
top:50px;
bottom:10px;
/*position:fixed;*/
right:10px;
left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

}
footer, #footer {
    background-color: #FFFFFF;
    border-radius: 0 0 4px 4px;
    color: #999999;
    font-size: 0.9em;
    line-height: normal;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

メニュー用CSS

div#menu {
    background: url("images/main-bg.png") repeat-x scroll 0 0 transparent;
    height: 41px;
}


div#menu ul.menu {
    padding-left: 30px;
}
div#menu ul {
    border-radius: 0 0 4px 4px;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

div#menu li {
    background: url("images/main-delimiter.png") no-repeat scroll 98% 4px transparent;
}
div#menu li {
    border-radius: 0 0 4px 4px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 5px 0 0;
    position: relative;
    z-index: 9;
}

次のような出力が必要です。

ここに画像の説明を入力

また、ブラウザのスクロールバー表示ではなく、コンテンツのロード時に #main 表示スクロールバーが必要です。

これらは私のメニューです：

ここに画像の説明を入力

#mainで使用することで問題を解決できますposition:fixedが、使用すると.. #main がメニューで上書きされます。

ここに画像の説明を入力

4

4 に答える 4

1

calc()新しいブラウザでは、関数を使用してセクションの高さを動的に設定できます。

html, body, .page { 
    height: 100%;
    margin: 0; padding: 0;
}

header {
  height: 100px;
}

section {
   height: -webkit-calc(100% - 110px);
   height: -moz-calc(100% - 110px);
   height: calc(100% - 110px);
   border: 1px red solid;
   overflow: auto;
}

ダブレットの例: http://dabblet.com/gist/5308785

calc() をサポートするブラウザー: http://caniuse.com/calc

于 2013-04-04T07:52:30.067 に答える
1

javascript/jqueryを使用して実行できますが、静的な高さを適用したり、高さを固定したりしないでください。投稿した画像から、次のcssが解決策になると思います。

#main に css を追加しました

  top:50px;
    bottom:10px;
    position:fixed;
    right:10px;
    left:10px;

編集:デモoverflow:autoに追加: http://jsfiddle.net/hEGms/2/#main

于 2013-04-04T07:51:31.907 に答える
0

「Fluid Height Layout」のグーグル。多くの例が得られます。

この例は、あなたが求めていることを実現します。

ここにもう1つあります

于 2013-04-04T10:02:19.470 に答える