个人中心
gpt4 book ai didi

html - 最小化网页后不滚动？

转载 作者：行者123 更新时间：2023-11-28 09:51:02 25 4
gpt4 key购买 nike

您好，我刚刚设置了我的网页以适应所有屏幕尺寸和分辨率。但是，现在当我缩小窗口大小时，没有滚动页面的选项，也看不到东西。有人可以帮我吗？下面是我的代码:

index.html:

    *<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-2.0.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <title>index</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <!--[if IE]>
      <link href="style.css" rel="stylesheet" type="text/css" />
      <![endif]-->
      <script type="text/javascript">
    conditionizr({
        debug: true,
        scriptSrc: 'js/conditionizr/',
        styleSrc: 'css/conditionizr/',
        ieLessThan: { active: true, version: '9', scripts: true, styles: true, classes: true, customScript: false },
        chrome: { scripts: true, styles: true, classes: true, customScript: false },
        safari: { scripts: true, styles: true, classes: true, customScript: false },
        opera: { scripts: true, styles: true, classes: true, customScript: false },
        firefox: { scripts: true, styles: true, classes: true, customScript: false },
        ie10: { scripts: true, styles: true, classes: true, customScript: false },
        ie9: { scripts: true, styles: true, classes: true, customScript: false },
        ie8: { scripts: true, styles: true, classes: true, customScript: false },
        ie7: { scripts: true, styles: true, classes: true, customScript: false },
        ie6: { scripts: true, styles: true, classes: true, customScript: false },
        retina: { scripts: true, styles: true, classes: true, customScript: false },
        touch: { scripts: true, styles: true, classes: true, customScript: false },
        mac: true,
        win: true,
        x11: true,
        linux: true
    });
    </script>



</head>
<body>
<div id="main" width="100%;">
<div class="intro" style="font-family:Adobe Gothic Std B;"> SetUp2Go.co.uk offer complete set up businesses packs delivered to your door. Allowing you to go out, start earning money and be your own boss.  
We have spoken to industry professionals who have helped us choose <br> quality essential items in setting up your own business. </div>
    <div class="borderHorizontal"> 
        <a href="#" class="homeButton">Home</a>
        <a href="products.html" class="productsButton">Products</a>
        <a href="about.html" class="aboutButton">About</a>
        <a href="faqs.html" class="faqButton">FAQ's</a>
        <a href="contact.html" class="contactButton">Contact Us</a>
        <div class="emailText" style="font-family:Adobe Gothic Std B;"><b>setup2go@hotmail.com</b></div>
        <div class="facebookLink" type="image" src="facebook-icon.png" href="https://www.facebook.com/pages/SetUp2Gocouk/893630380654424"></div>

        <form class="paypal" name="_xclick" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="business" value="me@mybusiness.co.uk">
        <input type="hidden" name="currency_code" value="GBP">
        <input type="hidden" name="item_name" value="Teddy Bear">
        <input type="hidden" name="amount" value="12.99">
        <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">

    </form>
    </div>

    <div class="borderVertical">
    <img class="logoPhoto" src="images/image.png" alt="logo">
    </div>

    <div class="borderHorizontalNotTrading" style="font-family:Adobe Gothic Std B; text-align:center; color:#FF0000; font-size:38px;">
    <b>Currently not trading check back soon!</b>
    </div>

    <img class="windowCleanPhoto" src="images/WindowCleaningkit.jpg" alt="windowClean">
    <img class="shoeShinePhoto" src="images/shoeShine.jpg" alt="shoeShine">
    <img class="hairdresserPhoto" src="images/mobile_hairdresser.jpg" alt="sandwichMaking">
    <img class="homeCateringPhoto" src="images/home_catering.jpg" alt="placeholder">
    <img class="massuesPhoto" src="images/massues.jpg" alt="placeholder2">

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

样式.css:

body {
background: rgba(235,235,235,1);
background: -moz-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(235,235,235,1)), color-stop(0%, rgba(227,227,227,1)), color-stop(24%, rgba(214,214,214,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#ffffff', GradientType=1 );

    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

最佳答案

对于小分辨率，您可以使用类似这样的东西。

@media all and (max-width: 559px) {
body
{ 
   position:relative;
}
}

网络上有很多与媒体查询相关的示例。

关于html - 最小化网页后不滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25088063/

25 4 0
文章推荐： iOS 11.x 系统颜色
文章推荐： css - *只需使用最小宽度* 隐藏一个 div 元素
文章推荐： javascript - 如何制作基于个人浏览器的动态 GUI
文章推荐： jquery - 用 animate() CSS3 替换 jQuery 幻灯片
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com