0
https://jsfiddle.net/rtvrueg9/をスクロールすると、下部のコンテンツの一部が表示されないことがわかります。助言がありますか？divコンテンツがウェブページの下部から切り取られます
<?php include 'head.php';?>
A
答えて
0
あなたの体の位置が固定されているため、私はoverflow-x：hiddenを追加しました。代わりに水平スクロールバーを削除します。
その垂直水平のバーはあなたが} .content にunnessaryオーバーフロー-Yを削除
body {
\t \t \t \t \t \t width: 100%;
\t \t \t \t \t \t height: 100%;
\t \t \t \t \t \t padding: 0;
\t \t \t \t \t \t border: 0;
\t \t \t \t \t \t margin: 0;
\t \t \t \t \t overflow-x: hidden; /* EDIT */
\t \t \t \t \t }
\t \t \t \t h1 {
\t \t \t \t \t \t font-family: arial;
\t \t \t \t \t \t color: rgb(128, 128, 128);
\t \t \t \t \t \t text-align: center; \t
\t \t \t \t \t \t margin: 0;
\t \t \t \t \t }
\t \t \t \t \t header {
\t \t \t \t \t \t margin: 0;
\t \t \t \t \t \t padding: 0;
\t \t \t \t \t \t width: 100%;
\t \t \t \t \t \t height: 30%;
\t \t \t \t \t \t background: black;
\t \t \t \t \t \t background-image: url(profile_pic.jpg);
\t \t \t \t \t \t background-repeat: no-repeat;
\t \t \t \t \t \t background-position: right;
\t \t \t \t \t \t background-size: 20% 70%;
\t \t \t \t \t \t color: rgb(190, 190, 190);
\t \t \t \t \t \t text-align: center;
\t \t \t \t \t \t border-spacing: 5px 10px;
\t \t \t \t \t \t border: 1px solid black;
\t \t \t \t \t }
\t \t \t \t \t nav {
\t \t \t \t \t \t display: flex;
\t \t \t \t \t \t text-align: center;
\t \t \t \t \t \t height: 25px;
\t \t \t \t \t \t width: 100%;
\t \t \t \t \t \t background: rgb(80, 80, 80);
\t \t \t \t \t \t border: 1px solid rgb(80, 80, 80);
\t \t \t \t \t }
\t \t \t \t \t .nav_link {
\t \t \t \t \t \t flex-grow: 1;
\t \t \t \t \t \t line-height: 25px;
\t \t \t \t \t }
\t \t \t \t \t a {
\t \t \t \t \t \t text-decoration: none;
\t \t \t \t \t \t color: white;
\t \t \t \t \t }
\t \t \t \t \t a:hover {
\t \t \t \t \t \t text-decoration: underline;
\t \t \t \t \t }
\t \t \t \t \t .content {
\t \t \t \t \t \t width: 100%;
\t \t \t \t \t \t height: 100%;
\t \t \t \t \t \t margin: 0;
\t \t \t \t \t \t overflow-y:scroll; }
\t \t \t \t \t .myPanel {
\t \t \t \t \t \t border: 1px solid black;
\t \t \t \t \t \t border-radius: 7px 7px 7px 7px;
\t \t \t \t \t \t box-shadow: 0px 0px 4px 999;
\t \t \t \t \t \t width: 60%;
\t \t \t \t \t \t margin: 1% auto;
\t \t \t \t \t }
\t \t \t \t \t .myPanel .heading {
\t \t \t \t \t \t background: rgb(80, 80, 80);
\t \t \t \t \t \t border-radius: 5px 5px 0px 0px;
\t \t \t \t \t \t color: white;
\t \t \t \t \t \t padding: 5px 20px;
\t \t \t \t \t }
\t \t \t \t \t .myPanel .panelTime {
\t \t \t \t \t \t padding: 3px 20px;
\t \t \t \t \t \t background: silver;
\t \t \t \t \t \t border-radius: 0px 0px 5px 5px;
\t \t \t \t \t }
\t \t \t \t \t .myPanel p {
\t \t \t \t \t \t margin: 3px 0px 0px 3px;
\t \t \t \t \t }
\t \t \t \t \t .myPanel:hover {
\t \t \t \t \t \t box-shadow: 0px 0px 8px black;
\t \t \t \t \t }
\t \t \t \t \t .myPanel.heading:hover {
\t \t \t \t \t \t background: white;
\t \t \t \t \t \t border-radius: 5px 5px 0px 0px;
\t \t \t \t \t \t color: black;
\t \t \t \t \t \t font-family: arial;
\t \t \t \t \t }
\t \t \t \t \t .myPanel.panelTime:hover {
\t \t \t \t \t \t background: rgb(80, 80, 80);
\t \t \t \t \t \t font-family: arial;
\t \t \t \t \t \t color: white;
\t \t \t \t \t }<?php include 'head.php';?>
<body>
\t <header>
\t \t <h1>Resume</h1>
\t </header>
\t <nav>
\t \t <div class="nav_link">
\t \t \t <a href="index.php"> Home </a>
\t \t </div>
\t \t <div class="nav_link">
\t \t \t <a href="resume.php"> Resume </a>
\t \t </div>
\t \t <div class="nav_link">
\t \t \t <a href="sideprojects.php"> Side Projects </a>
\t \t </div>
\t \t <div class="nav_link">
\t \t \t <a href="aboutme.php"> About Me </a>
\t \t </div>
\t </nav>
\t <div class="content">
\t \t <div class="myPanel">
\t \t \t <div class="heading">US ARMY NATIONAL GUARD</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t <p>03/2014 -- Current</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t \t <p>Crystal River, FL</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Rank: PV2</ui></br>
\t \t \t \t \t \t \t \t <ui>Diesel Mechanic -- 91H</ui></br>
\t \t \t \t \t \t \t \t <ui>Military Police -- 31b<ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="myPanel">
\t \t \t <div class="heading">LILLYS ON THE LAKE</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t \t <p>06/2016 -- 02/2017</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t \t <p>Clermont FL</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Serving</ui></br>
\t \t \t \t \t \t \t \t <ui>Bartending</ui></br>
\t \t \t \t \t \t \t \t <ui>Service bar</ui></br>
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui></br>
\t \t \t \t \t \t \t \t <ui>Open/close</ui></br>
\t \t \t \t \t \t \t \t <ui>Food running</ui></br>
\t \t \t \t \t \t \t \t <ui>Expediting</ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="myPanel">
\t \t \t <div class="heading">PANE D'OR</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t \t <p>08/2015 -- 06/2016</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t \t <p>Winter Garden FL</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Baking</ui></br>
\t \t \t \t \t \t \t \t <ui>Pastry</ui></br>
\t \t \t \t \t \t \t \t <ui>Delivering</ui></br>
\t \t \t \t \t \t \t \t <ui>Sales at markets/shop</ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="myPanel">
\t \t \t <div class="heading">Disney</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t \t <p>06/2015 -- 11/2016</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t \t <p>Orlando FL</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Monorail pilot</ui></br>
\t \t \t \t \t \t \t \t <ui>Platform operator</ui></br>
\t \t \t \t \t \t \t \t <ui>Audience control</ui></br>
\t \t \t \t \t \t \t \t <ui>Customer relations</ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="myPanel">
\t \t \t <div class="heading">PERFORMANCE YEARS GTO</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t \t <p>01/2012 -- 02/2015</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t
\t \t \t \t \t \t \t <p>Hatfield PA</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Shipping</ui></br>
\t \t \t \t \t \t \t \t <ui>Receiving</ui></br>
\t \t \t \t \t \t \t \t <ui>Pulling/packing/sorting</ui></br>
\t \t \t \t \t \t \t \t <ui>Picker operator</ui></br>
\t \t \t \t \t \t \t \t <ui>Forklift operator</ui></br>
\t \t \t \t \t \t \t \t <ui>Customer service</ui></br>
\t \t \t \t \t \t \t \t <ui>In house sales</ui></br>
\t \t \t \t \t \t \t \t <ui>Show sales</ui></br>
\t \t \t \t \t \t \t \t <ui>Inventory</ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="myPanel">
\t \t \t <div class="heading">GIANT FOODS</div>
\t \t \t \t <div class="panelTime">
\t \t \t \t \t <p>01/2012 -- 03/2013</p>
\t \t \t \t \t <div class="panelBody">
\t \t \t \t \t \t \t <p>Montgomeryville PA</p>
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <ui>Stocking shelves</ui></br>
\t \t \t \t \t \t \t \t <ui>Rotate merchandise</ui></br>
\t \t \t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>+1
これでスクロールバーが下に届くように修正されましたが、今すぐヘッダーが壊れてしまいました。 –
+1
編集：大丈夫、ヘッダーの高さを30％から25vhに変更しました。 –
0
用途：
<?php include_once("head.php"); ?>
あなたのHTLMファイルがでindex.phpにindex.htmlをから名前を変更する必要がありますまた、head.phpファイルはHTMLファイルと同じディレクトリにあることを確認してくださいphpの拡張子
関連する問題
- 1. Webviewのコンテンツが一番下から切り取られている[ANDROID]
- 2. Android NOOKエミュレータ - 画面の下部が切り取られていますか？
- 3. ウェブページの下部/上部にJavaScriptがありますか？
- 4. HTML - 下から切り取った
- 5. 子divからdivコンテンツを取得onclick
- 6. Android ScrollViewが最下部で切り捨てられる
- 7. ボタンの下にテキストが切り取られる
- 8. レイアウトが上から切り取られます
- 9. CSS要素の回転、部分が切り取られていますか？
- 10. トップDIVサイズからコンテンツ - 下部DIVスクロールして残りのスペースをウィンドウに合わせる
- 11. 下部のdivが残りの部分を取る方法
- 12. イタリック文字の下端がテキストボックス内で切り取られます
- 13. ViewCellが正しく配置されず、コンテンツの一部が切り取られない - Xamarinフォーム
- 14. ウェブページのフッターがブラウザウィンドウの下部に残ります
- 15. div idからxpathコンテンツを取得
- 16. 画像が切り抜かれずに切り取られます
- 17. ListViewは上部からではなく下部から取り込まれます
- 18. ウェブページからコンテンツを取得できません
- 19. 私のFacebookのiframeアプリが一番下に切り取られました
- 20. ウェブページから意味のある有用なコンテンツを取り出す方法は？
- 21. フッターは常にコンテンツの下部にありますが、ビューポートの下部に十分なコンテンツがない場合
- 22. ウェブページから純粋なhtmlコンテンツを取得する
- 23. divコンテンツが切断される
- 24. wm_title（ "message"）がtkinterウィンドウで切り取られていますか？
- 25. クリック時のdivコンテンツの切り替え
- 26. 外部のファイルからhtmlコンテンツを取得できますか？
- 27. d3jsの端からX軸とY軸が切り取られています
- 28. OL3/Geoserver：ベクトルタイルラベルが切り取られる
- 29. 円のdivの一部を下から削除する
- 30. コンテンツがdivにスティックされていて、最下部に行かない
ここで意味のあるコードと問題の説明を追加してください気になる場合。修復が必要なサイト にリンクしないでください。そうしないと、 問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例（MCVE）]を投稿すると（）、より良い回答を得るのに役立ちます（http://stackoverflow.com/help/mcve）。詳細については、 [私のWebサイトの何かが動作しません。 ]リンクを貼り付けることはできますか？]（https://meta.stackexchange.com/questions/125997/） ありがとう！ –