stackoom
  简体   繁体   中英

How to make divs not shrink when window is resized?

 原文  2020-08-14 13:53:25  0   1    javascript/ html/ css

Question

I am making a notes page for my classmates as we return to school, and I have this flashcard-type UI that I'm using. I currently have 4 of the cards on the page, but I need to fit 7, and I would like it to scroll horizontally. I have already tried x-overflow: scroll; in CSS on the body, but it didn't seem to work. My code is attached to the fiddle below, please let me know how I can fix the horizontal scrolling problem.

In a general sense, I have 4 divs in a row that shrink the div size when the window resolution is changed. Changing the x-overflow property in css doesn't work, so is there a way so these divs will not shrink and will make the page scroll instead? 

 var UID = { _current: 0, getNew: function(){ this._current++; return this._current; } }; HTMLElement.prototype.pseudoStyle = function(element,prop,value){ var _this = this; var _sheetId = "pseudoStyles"; var _head = document.head || document.getElementsByTagName('head')[0]; var _sheet = document.getElementById(_sheetId) || document.createElement('style'); _sheet.id = _sheetId; var className = "pseudoStyle" + UID.getNew(); _this.className += " "+className; _sheet.innerHTML += "."+className+":"+element+"{"+prop+":"+value+"}"; _head.appendChild(_sheet); return this; }; var open = false; function enlarge(box, header) { if (open) { open = false; header.style.top = "35%"; header.style.fontSize = '4.5em'; box.pseudoStyle("before","top","-50%"); box.pseudoStyle("before", "transform", "skewY(345deg)"); box.style.position = 'relative'; box.style.width = '320px'; box.style.height = '420px'; box.style.zIndex = '1'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)"; document.getElementById("greything").style.zIndex = '-1'; } else { open = true; box.pseudoStyle("before","top","-70%"); box.pseudoStyle("before", "transform", "skewY(390deg)"); box.style.width = '640px'; box.style.height = '840px'; box.style.background = '#122936'; box.style.overflow = 'hidden'; box.style.zIndex = '4'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)"; document.getElementById("greything").style.zIndex = '2'; header.style.top = "10px"; header.style.fontSize = '6em'; } }
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap'); .header { color: whitesmoke; position: relative; z-index: 5; text-align: center; font-size: 4.5em; top: 35%; transition: .5s; } #greything { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: 1s; }.card::before { z-index: 3; content: ''; position: absolute; top: -50%; width: 100%; height: 100%; background: #2196f3; transform: skewY(345deg); transition: 1s; }.card { z-index: 1; position: relative; width: 320px; height: 420px; background: #122936; border-radius: 20px; overflow: hidden; transition: .5s; margin: 50px } * { margin: 0; padding: 0; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #09161d; overflow-x: scroll; } #notes { flex-wrap: nowrap; word-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: rgba(0,0,0,0); }::-webkit-scrollbar-thumb { background: rgba(0,0,0,0); border-radius: 10px; transition: 1s; }::-webkit-scrollbar-thumb:hover { background: #2196f3; transition: 1s; }
 <.doctype html> <html> <head> <title>StudySmart Theme</title> <link rel="stylesheet" type="text/css" href="theme.css"> <script src="script,js"></script> </head> <body> <div class="card" id="science" onclick="enlarge(this. document,getElementById('hS'))"> <h1 class="header" id="hS">Science</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="history" onclick="enlarge(this. document,getElementById('hH'))"> <h1 class="header" id="hH">History</h1> </div> <div class="card" id="english" onclick="enlarge(this. document.getElementById('hE'))"> <h1 class="header" id="hE">English</h1> </div> <div id="greything"></div> </body>

1 answers

solution1
 3 ACCPTED  2020-08-14 14:01:55

Just add container. Look at this:

html 

<body>
    <div class="container">
    //your body code
    </div>

CSS 

.container {
  display:flex;
  flex-direction: row;
}

Working example: 

 var UID = { _current: 0, getNew: function(){ this._current++; return this._current; } }; HTMLElement.prototype.pseudoStyle = function(element,prop,value){ var _this = this; var _sheetId = "pseudoStyles"; var _head = document.head || document.getElementsByTagName('head')[0]; var _sheet = document.getElementById(_sheetId) || document.createElement('style'); _sheet.id = _sheetId; var className = "pseudoStyle" + UID.getNew(); _this.className += " "+className; _sheet.innerHTML += "."+className+":"+element+"{"+prop+":"+value+"}"; _head.appendChild(_sheet); return this; }; var open = false; function enlarge(box, header) { if (open) { open = false; header.style.top = "35%"; header.style.fontSize = '4.5em'; box.pseudoStyle("before","top","-50%"); box.pseudoStyle("before", "transform", "skewY(345deg)"); box.style.position = 'relative'; box.style.width = '320px'; box.style.height = '420px'; box.style.zIndex = '1'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)"; document.getElementById("greything").style.zIndex = '-1'; } else { open = true; box.pseudoStyle("before","top","-70%"); box.pseudoStyle("before", "transform", "skewY(390deg)"); box.style.width = '640px'; box.style.height = '840px'; box.style.background = '#122936'; box.style.overflow = 'hidden'; box.style.zIndex = '4'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)"; document.getElementById("greything").style.zIndex = '2'; header.style.top = "10px"; header.style.fontSize = '6em'; } }
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap'); .container { display:flex; flex-direction: row; }.header { color: whitesmoke; position: relative; z-index: 5; text-align: center; font-size: 4.5em; top: 35%; transition: .5s; } #greything { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: 1s; }.card::before { z-index: 3; content: ''; position: absolute; top: -50%; width: 100%; height: 100%; background: #2196f3; transform: skewY(345deg); transition: 1s; }.card { z-index: 1; position: relative; width: 320px; height: 420px; background: #122936; border-radius: 20px; overflow: hidden; transition: .5s; margin: 50px } * { margin: 0; padding: 0; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #09161d; overflow-x: scroll; } #notes { flex-wrap: nowrap; word-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: rgba(0,0,0,0); }::-webkit-scrollbar-thumb { background: rgba(0,0,0,0); border-radius: 10px; transition: 1s; }::-webkit-scrollbar-thumb:hover { background: #2196f3; transition: 1s; }
 <.doctype html> <html> <head> <title>StudySmart Theme</title> <link rel="stylesheet" type="text/css" href="theme.css"> <script src="script,js"></script> </head> <body> <div class="container"> <div class="card" id="science" onclick="enlarge(this. document,getElementById('hS'))"> <h1 class="header" id="hS">Science</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="history" onclick="enlarge(this. document,getElementById('hH'))"> <h1 class="header" id="hH">History</h1> </div> <div class="card" id="english" onclick="enlarge(this. document,getElementById('hE'))"> <h1 class="header" id="hE">English</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="math" onclick="enlarge(this. document.getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div id="greything"></div> </div> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make this effect work if the window is resized when page is scrolled How can I make my website stay when window is resized CSS : One of the DIVs gets positioned higher when window is resized How make a canvas window that is resizable by the user also scale down or up when the browser window is resized How to make divs shrink to fit container maintaining their relative widths? How to make an svg inside a div to automatically rescale vertically when the browser window is resized vertically how to make the webpage follow the size of the browser window and when resized, the layout does not get distorted? How to Shrink and Restore Divs in jQuery How do I make the margins of a webpage shrink on horizontal window resize? How to make HTML table that can be resized to the visible window with button (javascript)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM