無滾動的HTML單頁

我想創建一個網頁。我需要的是網頁應該是基於用戶窗口大小的固定大小，就像我們不需要向下滾動以查看內容。我可以把它改成一個特定的高度，但事情是調整其大小又包含由於圖像尺寸無滾動的HTML單頁

在上面所示圖中的第一個圖像獲取超大滾動選項的瀏覽器窗口時，因此它顯示空的空間，而不是響應在第二個用戶窗口的大小減少，因此他們顯示滾動視圖，事情是我希望它變得靈活。爲了改變窗口大小而改變div的高度而不是顯示滾動選項。任何人都可以幫助我嗎？

感謝您的答案傢伙！也回答，如果在情況下，我想等寬的3列，並用相同的，滾動的選項固定的高度提前

感謝

來源

2017-02-03 TheLawliet94

您可以創建的jsfiddle鏈接？ –

「我可以改變它到一個特定的高度」在窗口大小上做同樣的事情，使用window.resize事件 –

你能提供你的代碼css/html的樣本，試圖實現這個嗎？ –

你需要的是VH（視高度）。有一個小提琴在這裏你可以看到它的工作：從w3school

.yourdivs{ 
    height:33vh; 
    background-color:red; 
    border-bottom:1px solid black; 
}

jsFIDDLE

：

CSS單位

VH：相對的高度的1％視。

視口：瀏覽器窗口大小。如果視口寬50cm，1vw = 0.5cm。

來源

2017-02-03 08:23:05 Gianno

$(document).ready(function() { 
 
    function setHeight() { 
 
    windowHeight = $(window).innerHeight(); 
 
    $('#divImage').css('min-height', windowHeight); 
 
    }; 
 
    console.log($('#divImage').height()); 
 
    setHeight(); 
 
});

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
#divImage { 
 
    height: auto; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divImage"> 
 
    <img src="http://placehold.it/1600x900"> 
 
</div>

來源

2017-02-03 08:24:13 Pranjal

您可以使用「新」 CSS單位VH和大衆它是相對於視口的大小和它的現在相當支持。例如：

.row { 
    height:33.3vh; 
}

請參閱this pen我已經制作了它的行動。

來源

2017-02-03 08:24:39 Matteo

Look at "meta" and css-style of body

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

和CSS：

body{ 
    padding: 0; 
    overflow: hidden; 
} 
body>div{ 
    max-height: 33.3vh; 
    overflow-x: auto; 
}

來源

2017-02-03 08:39:43

無滾動的HTML單頁

回答

相關問題