に基づいてウィンドウのサイズを変更：動的に私は動的に画面サイズに基づいて、私の窓の高さのサイズを変更したいので、この（最初の画像）が発生しませんのdivの高さ

以下

は私のHTMLとjQueryあります - すべての周りにpageContent divを追加せずにそれを行う方法はありますか？可能であれば、より簡潔に/よりクリーンな方法で。ありがとう！

$(document).ready(function() { 
 

 
    var divH = $(".newRow").outerHeight(); 
 
    var numDivs = $(".newRow").length; 
 
    var contentH = $(".pageContent").height(divH * numDivs + 10); 
 

 
    var footerH = $(".page-footer").height() + 12; 
 
    var headerH = $(".mainMenu").height(); 
 

 

 
    $(window).resize(function() { 
 
    $(contentH).height($(window).height() - footerH - headerH); 
 
    }); 
 

 
    $(window).trigger('resize'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pageContent"> 
 
    <div class="row cingapura newRow narrow simpleDoubleIcon"> 
 
    <div class="rowOne faq"> 
 
     <h3>Dúvidas frequentes </h3> 
 
    </div> 
 
    </div> 
 

 
    <div class="row cingapura newRow narrow simpleDoubleIcon"> 
 
    <div class="rowOne turnOn"> 
 
     <h3>Religar serviço</h3> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-11-01 Juliana Valverde

なしフレキシボックスを使用してそれを行うことができます。モバイルウィンドウのサイズ変更はできません。どのように表示されるべきかの画面を表示できませんか？フッターが底に付くようにしますか？ – Connum

@MathijsSegersあなたは正しいです、それはまさに私がやりたいことです。しかし、フレックスを使用することは私にとってはあまり効果がありません。これは、非常に大きなモバイルポータルの例です。実際のアプリケーションではなく、フレックスを使用してポータルの残りの部分にコードを混乱させます修正する時間の –

あなたが一番下に常にフッターを持つようにしたい場合は、私はあなたのフッターは、常にページの一番下にあるべきであると思います。この

.footerClass { 
position: absolute; 
right: 0; 
bottom: 0; 
left: 0; 
}

出典

2017-11-01 14:13:27 Shrugo

を試してみてください。したがって、ボディは画面全体の高さをカバーしなければならず、フッターはボトムに合わせる必要があります。それはCSSを介して修正することができます。

CSS

body { 
    position: relative; // make body the element the footer can be aligned with 
    min-height: 100%; // body covers AT LEAST the whole screen, even if there is less content 
    margin: 0; 
    padding: 0; 
} 

#content { 
    margin-bottom: XY; // see chapter "When JS is necessary" 
} 

footer { 
    position: absolute; // footer aligns absolute within related body 
    bottom: 0; 
    width: 100%; 
}

HTML

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="content"> 
      I am content and don't want to be covered!!! <br> 
      Thank you for paying attention on that, dear developer :* 
     </div> 
     <footer>My Footer is here</footer> 
    </body> 
</html>

JSが

は忘れてはいけない必要がある：フッターは、ページの下部にあるコンテンツにオーバーレイする予定です。そのため、コンテンツの最後のビットとページの最後の間にスペースを定義する必要があります。スペースは少なくともフッターと同じ高さを持つ必要があります。フッターの高さがわかっていて静的である場合は、コンテンツを折り返して余白を与えるなどして、これを行うことができます（上記の例のように）。
高さが変わってCSSで表現できない場合は、JSも使用する必要があります。それは以下のようにします。

はJavaScript

function setContentSpace() { 
    var footer = document.getElementByTagName("footer")[0]; 
    var content = document.getElementById("content"); 

    if (footer != null && content != null) { 
     content.style.marginBottom = footer.offsetHeight + "px"; 
    } 
}

出典

2017-11-01 14:21:59 Jaspa

あなたは、私はあなたがやろうものを得ることはありませんJavascriptを

<body class="site"> 
    <main class="content"> 
    ... 
    </main> 
    <footer class="footer"> 
    ... 
    </footer> 
</body> 

.site { 
    display: flex; 
    min-height: 100vh; /* set body height equal to viewport */ 
    flex-direction: column; 
} 

.content { 
    flex: 1; /* allow content to grow to remaining space */ 
}

Source

出典

2017-11-01 14:24:24

動的に私は動的に画面サイズに基づいて、私の窓の高さのサイズを変更したいので、この（最初の画像）が発生しませんのdivの高さ

答えて

CSS

HTML

JSが

はJavaScript

関連する問題