Question

我想知道是否有办法制作div，在调整大小时，将PAST扩展到垂直屏幕尺寸？ div（稍微调整大小）但不会在屏幕外调整大小。

我目前调整div（羊皮纸色盒子）的方法是：

div.mainBack{
   position:absolute;
   display:inline-block;
   top:50%;
   right:5%;
   transform:translate(0, -50%);
   border-style:outset;
   border-color:#B57F00;
   border-width:5px;
   background-color:#FCDD92;    /*  PARCHMENT - kind of*/
} 

div.mainWrapper{
    position:relative;
    top:3%;
    left:50%;
    transform:translate(-50%,0%);
    max-width:90%;
}

#imgWrapper{
    position:relative;
    padding-left:12%;
}

我正在谈论的页面正文如下：

<body>
<h1 id="pageHead">The Astantos Armoury</h1>
<p id="subhead">A Simple Introduction to Bladed Weaponry</p>

/* The images have a "href" because I have simple javascript that makes an
image gallery i.e. when you click the image you get a full size version */
<div id="gallery">
    <div class="mainWrapper">
        <p id="galleryHeading">Image Gallery</p>
    </div>
    </br>
    <div class="mainWrapper" id="imgWrapper">
        <img class="gallery" 
            src="images\sword_thumb.jpg" 
            href="images\sword.jpg" 
            data-caption="wallpaper-gallery.net/single/sword-wallpaper/sword-wallpaper-9.html" 
            alt="dao.jpg">
        <img class="gallery" 
            src="images\dao_thumb.jpg" 
            href="images\dao.jpg" 
            data-caption="https://www.aliexpress.com/item/Top-quality-of-Ba-Gua-Dao-Wushu-BroadSwords-with-free-shipping/32439115049.html?spm=2114.40010208.4.111.gVLuZw" 
            alt="dao.jpg">
        <img class="gallery" 
            src="images\guandao_thumb.jpg" 
            href="images\guandao.jpg" 
            data-caption="https://aliexpress.com/item/Damasucs-Steel-Kwan-Dao-Dadao-Guan-Gong-Dao-Master-Dao-Heavy-Duty/32612836207.html?spm=2114.40010208.4.22.j1tTli" 
            alt="guandao.jpg">
            <img class="gallery" 
                src="images\jian_thumb.jpg" 
                href="images\jian.jpg" 
                data-caption="https://au.pinterest.com/pin/325385141814676112/" 
                alt="jian.jpg">
        <img class="gallery" 
                src="images\spear_thumb.jpg" 
                href="images\spear.jpg" 
                data-caption="http://kung-fu-weapons.com/wp-content/uploads/2017/01/sp3-3.jpg" 
                alt="spear.jpg">
    </div>
    <div class="mainWrapper" id="homeButton"><a href="home.html"><p id="welcome">HOME</p></a></div>
</div>

我附上图片以澄清我的观点。

调整div超出屏幕末尾（垂直）

0 个答案: