Tôi sẽ bắt đầu bằng cách nói rằng tôi rất mới phát triển web nói chung và đây là trang web đáp ứng đầu tiên của tôi vì vậy hãy nhẹ nhàng và ghi nhớ điều này, tôi là định nghĩa của từ noob ở giai đoạn này . Đã tìm kiếm một câu trả lời trong một thời gian và không có may mắn Tôi hy vọng rằng ai đó ở đây có thể giúp tôi.Độ cao của trang đến 100% chế độ xem?
Tôi đang cố gắng tạo trang chủ cho trang web này. Thiết kế chỉ đơn giản là một khối xuống phía bên tay trái của trang hiển thị logo ở phía trên và sau đó là một loạt các liên kết bên dưới, tất cả đều nằm trên cùng một nền tảng. Ở bên phải của điều này là một hình ảnh lớn lấp đầy phần còn lại của màn hình. Tôi muốn toàn bộ trang để lấp đầy cửa sổ trình duyệt của bất kỳ thiết bị nào được xem trên vì vậy hoàn toàn không cần cuộn, tức là chiều rộng và chiều cao cả 100% của chế độ xem. Chiều rộng của trang cho tôi không đau buồn chút nào, thích nghi với các kích thước màn hình khác nhau như tôi muốn, với thanh bên ở 20% chiều rộng và hình ảnh chính ở 80%.
Tuy nhiên, chiều cao là một câu chuyện khác. Tôi có thể không có vẻ, trong bất kỳ sự kết hợp của CSS tôi đã cố gắng cho đến nay, để có thể có được chiều cao để hành xử ở 100% của khung nhìn. Hoặc thanh bên quá ngắn và hình ảnh chính quá dài hoặc cả hai ảnh quá dài, v.v. Hình ảnh chính tôi muốn giữ tỷ lệ cỡ ảnh và chỉ cần tràn nó theo yêu cầu để giữ phần lớn ảnh hiển thị và cạnh thanh Tôi chỉ muốn phù hợp với 100% chiều cao của trang. Đây là mã của tôi hiện tại:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Bất kỳ trợ giúp nào về điều này sẽ thực sự được đánh giá cao và đừng ngần ngại chỉ ra bất kỳ sai lầm nghiệp dư ồ ạt nào. Tôi sẵn sàng chấp nhận mọi lời chỉ trích và học hỏi từ nó. Cảm ơn
Điều đầu tiên tôi có thể đề xuất là xóa thẻ kiểu đó và chuyển css sang trang riêng của nó. Nếu bạn đang đi để mang lại các truy vấn phương tiện truyền thông và tất cả mọi thứ vào phương trình này thì bạn cần một trang css riêng biệt. –